React group project that consume space-x api you can reserve rocket or join mission

Overview

Space-Travelers-Hub

React group project

Space-Travelers-Hub

πŸ“— Table of Contents

πŸ“– [Space-Travelers-Hub]

[Space-Travelers-Hub] "Space-Travelers-Hub" is a real live data from the SpaceX API web application for a company that provides commercial and scientific space travel services. The application will allow users to:

  • book rockets and,
  • join selected space missions.

πŸ›  Built With

React Redux React Bootstrap

Tech Stack

Client
Server
  • Render
Database

Key Features

  • [book_rockets]
  • [cancel_book_rocket]
  • [join_mission]
  • [leave_mission]

(back to top)

Screenshots

Rockets View

Rockets_View

Missions_View

Missions_View

MyProfile_View

MyProfile_View

πŸš€ Live Demo

(back to top)

πŸ’» Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

In order to run this project you need:

  • Have visual studio Code in your PC.
  • Have a verified GitHub account.
  • Have a stable browser version.

Setup

Install

Install this project with:

  • React Redux

Usage

To run the project, execute the following command:

  • npm run build
  • npm run start

Run tests

To run tests, run the following command:

Coming Soon ....

Deployment

You can deploy this project using:

Coming Soon ....

(back to top)

πŸ‘₯ Authors

πŸ‘€ Reem Muhammed

πŸ‘€ Fahim-Khan

(back to top)

πŸ”­ Future Features

  • [Better_design]
  • [reserve_dragons]

(back to top)

🀝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project please star the project and feel free to add your own touches.

(back to top)

πŸ™ Acknowledgments

I would like to thank...

(back to top)

❓ FAQ

  • [How_to_use_the_app?]

    • [I puted a small div in the top explaining how to use tha application]
  • [Can_I_Contribute?]

    • [Sure, you're free to contribute and add your own touches]

(back to top)

πŸ“ License

This project is MIT licensed.

(back to top)

Comments
  • Approve Kanban board

    Approve Kanban board

    Hello MicroverseπŸ‘‹,

    We are two team members me and @Fahim-Khan-P.

    This is the link to our project for the Kanban board (https://github.com/users/ReemMohamedAbdelfatah/projects/3/views/1)

    have a good day!

    opened by ReemMohamedAbdelfatah 5
  • Complete version

    Complete version

    Hello MicroverseπŸ‘‹,

    In this pull request, we're @ReemMohamedAbdelfatah and @Fahim-Khan-P putting the full version of our Space travelers hub app for review.

    Have a good day!

    opened by ReemMohamedAbdelfatah 2
  • Display joined missions to myprofile page

    Display joined missions to myprofile page

    Hello πŸ‘‹,

    In this pull request the followings are doneπŸ‘Œ:

    βœ… Render a list of all joined missions (use filter()) on the "My profile" page. βœ… Add minimum style to my profile page.

    opened by ReemMohamedAbdelfatah 2
  • Fetch missions api

    Fetch missions api

    In this pull request, the followings are done:

    • Fetch data from the Missions endpoint.
    • dispatch an action to store the selected data in the Redux store
    • Use useSelector () Redux Hook to select the state slices and render lists of missions in corresponding routes.
    opened by ReemMohamedAbdelfatah 2
  • Complete version of Space travelers Hub

    Complete version of Space travelers Hub

    Hello MicroverseπŸ‘‹,

    In this pull request, we're @ReemMohamedAbdelfatah and @Fahim-Khan-P putting the full version of our Space travelers hub app for review.

    Have a good day!

    opened by ReemMohamedAbdelfatah 1
  • Add leave mission feature

    Add leave mission feature

    Hello πŸ‘‹, In this pull request the followings are done:

    • When a user clicks the "Leave Mission" button, an action is dispatched to delete the user from the store.
    • Missions that the user has joined already show a badge "Active Member" and a button "Leave Mission" instead of the "Join Mission" button (as per design).
    opened by ReemMohamedAbdelfatah 1
  • add join mission feature

    add join mission feature

    Hello πŸ‘‹, In this pull request the following is done:

    • When a user clicks the "Join Mission" button, an action is dispatched to update the store.
    opened by ReemMohamedAbdelfatah 1
  • structure mission redux skeleton

    structure mission redux skeleton

    In this pull request, the following is done:

    • Create a route and a view component. Use for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link).

    • Create a directory for all Redux state slice files.

    opened by ReemMohamedAbdelfatah 1
  • Show reserved rockets

    Show reserved rockets

    I've added the following addition

    • [ ] create list of reserved rockets from redux store using useSelectore() hook
    • [ ] render reserved rockets list to the MyProfile section
    • [ ] add style to the reserved rockets list
    opened by Fahim-Khan-P 0
  • Rocket cancelation

    Rocket cancelation

    I've added the following:

    • [ ] Change button when click the button
    • [ ] Add Reserved span tag to the reserved Rockets
    • [ ] Add style for cancel reservation event
    opened by Fahim-Khan-P 0
  • Rocket booking

    Rocket booking

    I've added the following:

    • [ ] Set default reservation to the false value
    • [ ] Reserve action creator
    • [ ] Reserve Rocket reducer
    • [ ] Use dispatch hook to handle button event
    • [ ] Change button text when press
    opened by Fahim-Khan-P 0
  • [1pt] Switch badges for Rockets - Conditional components

    [1pt] Switch badges for Rockets - Conditional components

    Rockets that have already been reserved should show a "Reserved" badge and "Cancel reservation" button instead of the default "Reserve rocket" (as per design)

    Use the React conditional rendering syntax:

    {rocket.reserved && ( // render Cancel Rocket button )}

    opened by Fahim-Khan-P 0
  • [1pt] Implement rocket booking cancelation - Actions

    [1pt] Implement rocket booking cancelation - Actions

    Follow the same logic as with the "Reserve rocket" - but you need to set the reserved key to false.

    Dispatch these actions upon click on the corresponding buttons.

    opened by Fahim-Khan-P 0
  • [3pt] Implement rocket booking - Actions

    [3pt] Implement rocket booking - Actions

    When a user clicks the "Reserve rocket" button, action needs to be dispatched to update the store. You need to get the ID of the reserved rocket and update the state. Remember you mustn't mutate the state. Instead, you need to return a new state object with all rockets, but the selected rocket will have an extra key reserved with its value set to true. You could use a JS filter() or map() to set the value of the new state - i.e.:

    const newState = state.map(rocket => { if(rocket.id !== id) return rocket; return { ...rocket, reserved: true }; });

    Regardless of which method you choose, make sure you place all your logic in the reducer. In the React view file, you should only dispatch the action with the correct rocket ID as an argument.

    opened by Fahim-Khan-P 0
  • [4pt] Display rockets - Lists render

    [4pt] Display rockets - Lists render

    • Use useSelector() Redux Hook to select the state slices and render lists of rockets in corresponding routes. i.e.:

    // get rockets data from the store const rockets = useSelector(state => state.rockets);

    opened by Fahim-Khan-P 0
  • [4pt] Fetch rockets - Fetch data

    [4pt] Fetch rockets - Fetch data

    • Fetch data from the Rockets endpoint (https://api.spacexdata.com/v3/rockets) when the application starts (as Rockets is the default view).

    • Once the data are fetched, dispatch an action to store the selected data in Redux store:

    id name type flickr_images

    • NOTE: Make sure you only dispatch those actions once and do not add data to store on every re-render (i.e. when changing views / using navigation).
    opened by Fahim-Khan-P 0
Owner
Reem
Full-Stack Software Developer with a love for React and Redux. I draw and color in my spare time. Open to new opportunities.
Reem
Full React && Redux project builded as a group project where user can reserved rockets and missions from SpaceX API

Full React && Redux project builded as a group project where user can reserved rockets and missions from SpaceX API. This data will be updated and displayed in the profile section of the page

Nicolas Gonzalez 8 Mar 23, 2022
Snow - social network can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Snow is a social network. Here you can create and share content! You can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Mateo Leal 70 Nov 28, 2022
Uses React library to consume a list of popular movies from the MovieDB API

A React project that consumes a list of movies from the movie db api. This project was made to teach other people.

Giovanna 18 Nov 10, 2022
Simple react js web that consume data from Spotify WEB API and use Spotify Playback SDK for playing a tracks

React JS Spotify Clone Simple react js web that consume data from Spotify WEB API and use Spotify Playback SDK for playing a tracks How to run First y

Dody 3 Sep 3, 2022
Al Mentoria is a virtual space to connect with mentors that can help you with your technical as well as behavioral issues

Al Mentoria is a virtual space to connect with mentors that can help you with your technical as well as behavioral issues. If you are stuck somewhere and need a second look at things, make a reservation now.

Uplift Lab 12 Nov 25, 2022
A Whatsapp Clone which built with reactJS. You can sign in with your Google Account and you can chat in real time.

Whatsapp Clone with ReactJS In this app you can create a simple chat room and send messages to each other using our google accounts in the room. Whats

Mert Γ‡ankaya 10 Nov 13, 2022
A Disney+ Clone that you can sign in with your Google AccountA Disney+ Clone that you can sign in with your Google Account

Disney+ Clone with ReactJS A Disney+ Clone that you can sign in with your Google Account. Click demo to try it by yourself! Disney+ Clone Demo Link Yo

Yusuf İşbilir 14 Jun 30, 2022
CodeClan - Week 9 - Group Project - App created using React, MongoDB and multiple APIs

Education Station Synopsis This app was completed by Cohort E49 for CodeClan's Professional Software Development course. The brief was to create an ed

Tristan Tinning 5 Oct 17, 2022
React & Redux group capstone project (M3W4).

Space Traveller React & Redux group capstone project. This project is done on module 3, week 4 of the Microverse full-stack development program. Requi

Behnam Aghaali 3 Jun 23, 2022
Group project for Launch Academy. Creating a review site for snow removal services.

snow-removal-reviews Group project for Launch Academy. Creating a review site for snow removal services. Authors: Lilly Fang, Nicholas Costagliola, Ja

Petar T 2 Feb 1, 2022
THE EXHIBIT is a group project which ideas originally came from the needs of sharing student's projects to showcase to the world

THE EXHIBIT is a group project which ideas originally came from the needs of sharing student's projects to showcase to the world

Josh Nguyen 4 Apr 26, 2022
Stellar is an app that gives you real time information about what’s going on in space.

Stellar is an app that gives you real time information about what’s going on in space. Developed in Snack Expo using React Native. Check README.md to learn how to run the app.

Shivam Maji 3 Jun 22, 2022
React & Redux project - Space Travelers' Hub.

React & Redux project - Space Travelers' Hub.

Nelsino Francisco 11 Dec 6, 2021
React front-end for Team Rio handling the Space Ya Tech Project

The web app is automatically deployed via github action to Netlify Visit it here Getting Started with Create React App This project was bootstrapped w

SpaceyaTech 8 Dec 6, 2022
Full Stack Stream Group Chat Made with React - NodejsπŸ“’

Full Stack Realtime Chat Messaging Application with authintication, direct messages, group chats creation, emojis & reactions, giphs, edit and delete messages, reply and specialized commands as forward. Made with React - Nodejs .

Kareem Abdelsamea Fahmy 6 Jul 6, 2022
Space Travelers Built With JavaScript React Redux Bootstrap React

A web application for a company that provides commercial and scientific space travel services. The application will allow users to book rockets and join selected space missions.

Leonardo Goss 2 Apr 7, 2022
A Simple Space Game With React

Getting Started with Create React App This project was bootstrapped with Create React App. Screenshots ?? Available Scripts In the project directory,

kensriii 5 Dec 5, 2022
Space Traveler's Hub built with React/Redux, Bootstrap and CSS

Space Traveler's Hub is a web application that shows information about space missions and rockets and gives the option to select a rocket and join in a mission. It is built with React/Redux, Bootstrap and CSS.

Tufahel Ahmed 5 Jun 14, 2022
A web application for a company that provides commercial and scientific space travel services.

A web application for a company that provides commercial and scientific space travel services. The application allows users to book rockets and join selected space missions.

Hamza Ellaouzi 11 Oct 29, 2021