emhamza / space-x

This repo will be used for developing a space-X web app, where the users can book their journey to the space.

React Space-X App

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 [React Space-X App]

The SpaceX app, developed using React and Redux, offers an immersive experience for space enthusiasts by seamlessly fetching data from an API that provides detailed information about different rockets and missions. Users can explore the app's extensive database, learning about the technical specifications, historical achievements, and future plans of SpaceX. Moreover, the app incorporates a user-friendly booking functionality, divided into three separate pages, allowing users to reserve seats for upcoming missions, track their bookings, and stay up to date with launch schedules. With its intuitive interface and comprehensive features, the SpaceX app brings the wonders of space exploration to the fingertips of users, offering a captivating journey through the realm of SpaceX's ambitious ventures.

🛠 Built With

-React & Redux

Tech Stack

Version Control

• Git Hub

Visual Studio Code

• Visual Studio Code

Client

• HTML5
• CSS

Key Features

• [Usage of React Libaray]
• [Usage of Redux Store]
• [Fetching date from an API using axios]

(back to top)

🚀 Live Demo

-Online version

(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:

-Visual Studio Code -Github Account -Git Bash -Node JS -React -Redux Toolkit

Setup

Clone this repository to your desired folder: Use git clone command or downloaded ZIP folder Example command:

  cd my-folder
  git clone: (https://github.com/emhamza/Space-X)

Install

Install this project with: npm Example commands:

  cd my-project
  npm init -y

  npm install --save-dev [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] @babel/[email protected] @babel/[email protected]  @babel/[email protected]  @babel/[email protected] @babel/[email protected]

  npm install --save-dev [email protected] [email protected] [email protected] [email protected]

Usage

To run the project, execute the following command: Example command:

   npm run dev

Run tests

To run tests, run the following command: npm test Example command:

  npx stylelint "**/*.{css,scss}" --fix

  npx eslint "**/*.js" --fix

Deployment

You can deploy this project using: GitHub Pages

(back to top)

👥 Authors

👤 Umair Hamza

• GitHub: @emhamza
• Twitter: @uhamzaz
• LinkedIn: Umair Hamza

👤 Marwan Abdelsattar

• GitHub: @githubhandle
• Twitter: @twitterhandle
• LinkedIn: LinkedIn

(back to top)

🔭 Future Features

• [Detail Cards about Rockets]
• [Responsiveness ]

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the https://github.com/emhamza/Space-X/issues

(back to top)

⭐️ Show your support

If you like this project then please follow me on Linkedin, Twitter and GitHub. Greetings!

(back to top)

🙏 Acknowledgments

I would like to thank Microvers for this project!

(back to top)

📝 License

This project is MIT licensed.

(back to top)

space-x's Issues

[1pt] Create empty My profile - Setup (group task)

• Create a route and a view component. Use <NavLink /> for the page navigation links and style active class to indicate which section/page the user is currently on (underline active navigation link).
• This view should be empty - you will add content in separate tasks.

[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).

[1pt] Switch badges for Missions - Conditional components

Missions that the user has joined already should show a badge "Active Member" instead of the default "NOT A MEMBER" and a button "Leave Mission" instead of the "Join Mission" button (as per design).

Use the React conditional rendering syntax:

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

[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.

[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
)}

[4pt] Display missions - Lists render

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

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

• You can style the whole application "by hand" or you could use React Bootstrap, a UI library that could speed up the process. This is a popular library and working with its components would be good practice.
• Render a table with the missions' data (as per design).

[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);

• You can style the whole application "by hand" or you could use React Bootstrap, a UI library that could speed up the process. This is a popular library and working with its components would be good practice.
• Render a list of rockets (as per design). For the image of a rocket use the first image in the array of flickr_images.

[2pt] Display reserved rockets in My profile - Filters

Render a list of all reserved rockets (use filter()) on the "My profile" page.

[1pt] Implement mission leaving - Actions

• Follow the same logic as with the "Join mission" - but you need to set the reserved key to false.
• Dispatch these actions upon click on the corresponding buttons.

Team3 [3pt] Implement dragon booking - Actions

• When a user clicks the "Reserve dragon" button, action needs to be dispatched to update the store. You need to get the ID of the reserved dragon and update the state. Remember you mustn't mutate the state. Instead, you need to return a new state object with all dragons, 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(dragon.id !== id) 
        return dragon;
    return { ...dragon, 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 dragon ID as an argument.

[1pt] Create basic structure for Missions - Setup

• Create a route and a view component. Use <NavLink /> 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.

Kanban Board Setup

In this milestone we:

• Copied the Kanban board on the Github Project here
• There are 2 people in this team @emhamza : Rockets & @MarwanDev : Missions

[1pt] Create website header with empty nav - Setup (group task)

• Download the free image for the app logo.
• Create empty navigation (this will be filled in in separate tasks).

[1pt] Create basic structure for Rockets - Setup

• Create a route and a view component. Use <NavLink /> 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.

[3pt] Implement mission joining - Actions

• When a user clicks the "Join Mission" button, action needs to be dispatched to update the store. You need to get the ID of the selected mission and update the state. Remember you mustn't mutate the state. Instead, you need to return a new state object with all missions, but the selected mission 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(mission.id !== id) 
        return mission;
    return { ...mission, 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.

Team3 [4pt] Display dragons - Lists render

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

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

• You can style the whole application "by hand" or you could use React Bootstrap, a UI library that could speed up the process. This is a popular library and working with its components would be good practice.

• Render a list of dragons (as per design). For the image of a dragon use the first image in the array of flickr_images.

[1pt] Create app and install basic dependencies - Setup (group task)

• Create React App.
• Install React Redux, Redux Logger and React Router.

Team3 [1pt] Create basic structure for Dragons - Setup

• Create a route and a view component. Use <NavLink /> 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.

Team3 [1pt] Switch badges for Dragons - Conditional components

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

Use the React conditional rendering syntax:

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

[2pt] Display joined missions in My profile - Filters

Render a list of all joined missions (use filter()) on the "My profile" page.

Team3 [2pt] Display reserved dragons in My profile - Filters

Render a list of all reserved dragons (use filter()) on the "My profile" page.

[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.

Team3 [1pt] Implement dragon booking cancelation - Actions

• Follow the same logic as with the "Reserve dragon" - but you need to set the reserved key to false.
• Dispatch these actions upon click on the corresponding buttons.

[4pt] Fetch missions - Fetch data

Fetch data from the Missions endpoint (https://api.spacexdata.com/v3/missions) when a user navigates to the Missions section.

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

• mission_id
• mission_name
• description

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).

Team3 [4pt] Fetch dragons - Fetch data

Fetch data from the Dragons endpoint (https://api.spacexdata.com/v3/dragons) when a user navigates to the Dragons section.

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).