This web application provides commercial and scientific space travel services. The application allows users to book rockets and join selected space missions.

Overview

space-hub

About Project

"Space Traveler's Hub" is A web application that provides commercial and scientific space travelling services, We are working with real live data from the SpaceX API. The application will allow users to book rockets and join selected space missions. The Space Travelers' Hub consists of Rockets, Missions, and the My Profile section.

Rockets Missions My Profile section

Built With

  • React js
  • Redux
  • CSS
  • Testing
  • API
  • Tailwindcss

Click here for live version

Getting Started

  • Clone this repo https://github.com/NickEmma/space-hub

    git clone https://github.com/NickEmma/space-hub
  • Navigate to SpaceTravelers folder/directory

    cd SpaceTravelers
  • On the comandline, at the project's root, run npm install to install app dependencies

  • Next, run npm start which will run the app in the development mode.

  • Open http://localhost:3000 to view it in the browser.

  • ALTERNATIVELY

    • Just run npm run build which will build the project and generate output files into the build directory.

    • Go to build directory and manually open index.html to interact with the app

Authors

👤 Nicholas Emmanuel

👤 Abdollah Raafat

🤝 Contributing

Contributions, issues, and feature requests are welcome! thanks: issue-link

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

📝 License

This project is MIT licensed.

Comments
  • In this Milestone: We completed the task

    In this Milestone: We completed the task

    • The Space Travelers' Hub consists of Rockets, Missions, and the My Profile section.
    • The Rockets section displays a list of all available SpaceX rockets. Users can book each rocket by clicking the reservation button or canceling the previously made booking.
    • The Missions section displays a list of current missions along with their brief description and participation status.
    • There is also a button next to each mission that allows users to join the selected mission or leave the mission the user joined earlier.
    • The My Profile section displays all reserved rockets and space missions.
    opened by nickemma 2
  • Finish rockets section and add tests

    Finish rockets section and add tests

    • [ ] Once the data are fetched, dispatch an action to store the selected data in Redux store
    • [ ] Use useSelector() Redux Hook to select the state slices and render lists of rockets in corresponding routes. i.e.
    • [ ] 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. Render a table with the missions' data (as per design).
    opened by AbdollahRaafat 0
  • Join cancel

    Join cancel

    • I created the missions so that the user has joined already and should show a badge "Active Member" instead of the default "NOT A MEMBER"
    • The button "Leave Mission" instead of the "Join Mission" button (as per design).
    • I render a table with the missions' data (as per design).
    opened by nickemma 0
  • Render data

    Render data

    • I created a reducer and action dispatcher for the "Join Mission" button.
    • The logic here is practically the same as with rockets - I just passed in the mission's ID to the corresponding action and update the mission's state with the selected mission having a new key/value - reserved: true.
    • I despatched these actions upon clicking on the corresponding buttons.
    opened by nickemma 0
  • add the data from the api

    add the data from the api

    • The Missions section displays a list of current missions along with their brief description and participation status.
    • There is also a button next to each mission that allows users to join the selected mission or leave the mission the user joined earlier.
    • the data are fetched, and I dispatched an action to store the selected data in Redux store:
    opened by nickemma 0
  • Add empty profile, mission, rockets page

    Add empty profile, mission, rockets page

    • [ ] 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.
    opened by AbdollahRaafat 0
  • [1pt] Create empty My profile - Setup (group task)

    [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.
    opened by nickemma 0
  • [1pt] Create basic structure for Rockets - Setup

    [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.
    opened by nickemma 0
  • [1pt] Create basic structure for Missions - Setup

    [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.
    opened by nickemma 0
  • Team3 [1pt] Create basic structure for Dragons - Setup

    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.
    opened by nickemma 0
  • [4pt]  Fetch missions - Fetch data

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

    opened by nickemma 0
Owner
Nicholas Emmanuel
Full Stack Software developer, Rails enthusiast, part-time guitarist. Stack: JavaScript, Ruby, Rails, React, Redux, Nodejs, Express.js. Looking for my next job!
Nicholas Emmanuel
This web application provides commercial and scientific space travel services. The application allows users to book rockets and join selected space missions.

space-hub About Project "Space Traveler's Hub" is A web application that provides commercial and scientific space travelling services, We are working

Nicholas Emmanuel 7 Nov 2, 2022
This web application provides commercial and scientific space travel services. The application allows users to book rockets and join selected space missions.

Space Traveler's Hub This web application provides commercial and scientific space travel services. The application allows users to book rockets and j

Michael Mesfin 6 Oct 4, 2022
In this project we built a web application that consumes an SpaceX API. It provides commercial and scientific space travel services that allows users to book rockets and join selected space missions.

Space Travelers' Hub In this project we built a web application that consumes an SpaceX API. It provides commercial and scientific space travel servic

Diego Yon 7 Sep 30, 2022
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.

Space Travelers A web application for a company that provides commercial and scientific space travel services. The application will allow users to boo

Hector Torres 2 Apr 6, 2022
This a web application for a company that provides commercial and scientific space travel services. The application will allow users to book rockets, dragons and join selected space missions.

Space Travelers' Hub In this project, we have worked with the real live data from the SpaceX API. Our task was to build a web application for a compan

Apuabi Titilope 4 Oct 31, 2022
"Space-Travelers-Hub" is a website that allows users to book rockets and join selected space missions by using data from the SpaceX API.

Space-Travelers-Hub This project was bootstrapped with Create React App. Description "Space-Travelers-Hub" is a website that allows users to book rock

Tresor Sawasawa 4 Mar 13, 2022
A Web application that showcases Rockets and Missions from the SpaceX API, you can reserve Rockets and join Missions to your profile.

Space Travelers' Hub Project that showcases Rockets and missions from the SpaceX API, the user can reserve Rockets and join Missions, and save them in

David Vergaray 9 Apr 17, 2022
Space Travelers' Hub - a web application that facilitates booking rockets and join selected space missions

This is a web application that facilitates booking rockets and join selected space missions. It is built for a company that offers both commercial and scientific space travel services. The application also works with real live data from the SpaceX API.

Mong'are 6 Mar 29, 2022
This project is a web application for a company that provides commercial and scientific space travel services

Space Traveler's Hub This project is a web application for a company that provides commercial and scientific space travel services.

Selma Belhadj 5 Jun 8, 2022
Build a web application for a company that provides commercial and scientific space travel services

Build 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

Abraha Kahsay 5 Aug 27, 2022
This is a dummy website for company that provides commercial and scientific space travel services

This is a dummy website for company that provides commercial and scientific space travel services. This application will allow users to book rockets and join selected space missions.

David Ouma 2 Apr 14, 2022
This application allows you to book missions and rockets with Elon Musk's company, SpaceX

Space Traveler's Hub This is an application built to book missions and rockets from SpaceX You can both join and leave missions, reserve and cancel re

Santiago Velosa 4 Jun 13, 2022
A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

Project Name Awesome book with ES6 Description the project. This is a single page application that allows users to keep track of their books. Users ca

Micheal Oguntayo 4 Oct 13, 2022
This is an app that displays a list of books, allow users add a book and remove a selected book.

BookStore This is an app that displays a list of books, allow users add a book and remove a selected book. Built With HTML CSS -React -Redux -JavaScri

ABDUL ALI 5 Jul 22, 2022
The Bookstore is a website that allows the user to :display a list of books , Add a book and remove a selected book.

Book Store The Bookstore is a website that allows the user to : -Display a list of books. -Add a book. -Remove a selected book. Built With ?? Basic CS

Nedjwa Bouraiou 4 Sep 6, 2022
This is a single page web application that keeps tracks of books. Book details captured are the book title, author and ISBN. User can add a book, view a list of books and also remove any un wanted books.

Project Name This is a single page web application that keeps tracks of books. Book details captured are the book title, author and ISBN. User can add

Olivier 6 Nov 20, 2022
The Bookstore is a website where the user can display a list of books, add a book by providing a title, an author, and selecting from the categories, and remove a selected book.

Bookstore The Book Store is a website where the user can display a list of books, add a book and remove a selected book. Microverse's Bookstore API wa

Virag Kormoczy 9 Jan 1, 2023