Space Traveler's Hub is a single page web application that fatches rockets, missions from the SpaceX API.

Related tags

React react redux javascript css html webpack
Overview

Space-Travelers-Hub

Space Traveler's Hub is a single page web application that fatches rockets, missions from the SpaceX API. Users can book and cancel their reservations for rockets and missions. Application has three pages Rockets/Missions/MY Profile, My Profile page shows the list of reserved rockets and missions.

Screenshots:

screenshot

screenshot

screenshot

Built With

  • HTML
  • CSS
  • JavaScript
  • REACT
  • Redux
  • Webpack
  • Jest

Online live link

Visit project online

Getting Started

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

Prerequisites

  • A text editor(preferably Visual Studio Code)
  • Node
  • Web browser

Install

Using it Locally

  • Clone the project
git clone https://github.com/thecodechaser/space-travelers-hub

cd space-travelers-hub
  • Install dependencies
npm i 
or
npm install
  • To Start the development server
npm start
  • To test the project
npm run test

Visit And Open Files

Visit Repo

Download Repo

Download Repo

Authors

👤 Ranjeet Singh

👤 Kalolo Chola Lemba

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

  • Inspiration: Microverse

📝 License

This project is MIT licensed.

Comments
  • Created Space travelers hub web application

    Created Space travelers hub web application

    This PR includes the following features:

    • Setup
    1. Created react app.
    2. Install dependencies.
    • Basic setup
    1. Created Header component.
    2. Created MyProfile component.
    • Created Rockets component and Redux state.
    1. Created Rockets component.
    2. Created Redux actions, state, reducers.
    3. Fetched rockets details from SpaceX API.
    4. Showed details of the rockets on the component.
    5. Implemented Reserve/Cancel booking for rockets.
    • Created Missions component and Redux state.
    1. Created Missions component.
    2. Created Redux actions, state, reducers.
    3. Fetched missions details from SpaceX API.
    4. Showed details of the missions on the component.
    5. Implemented Reserve/Cancel booking for missions.
    • Updated MyProfile Component
    1. Implemented functionality to show reserved rockets on the component.
    2. Implemented functionality to show reserved missions on the component.
    • Applied styling for components
    1. Applied styling for Header, MyProfile component.
    2. Applied styling for Rockets component.
    3. Applied styling for Missions component.
    opened by thecodechaser 10
  • Implement switch badges for missions

    Implement switch badges for missions

    In this feature I did the following:

    • Implement switch badges.
    • Enable from "NOT a MEMBER" to "ActiveMember" when join button is clicked.
    opened by KayLemba 1
  • Implement mission joining and leaving actions

    Implement mission joining and leaving actions

    In this feature I did the following:

    • Implement feature update with reference to the following issues: [3pt] Implement mission joining - Actions #10 [1pt] Implement mission leaving - Actions #9
    opened by KayLemba 1
  • Fetch data from Api

    Fetch data from Api

    In this project I did the following:

    • Created action for fetch missions.
    • Updated reducer for fetch mission action.
    • Created API function to fetch missions data from API.
    opened by KayLemba 1
  • Create app and setup

    Create app and setup

    This is a space travellers project built with React. In project I added the following features.

    • Create react app
    • Add redux
    • Add redux-logger
    • Add react-router-dom
    • Add linters
    opened by KayLemba 1
  • Set up Kanban board

    Set up Kanban board

    This issue includes the following details for the review:

    • For this react-redux group project, We are only two members in the teams @thecodechaser, @KayLemba
    • We removed all cards with title Team3 from the Kanban board
    • We closed all issues with titleTeam3

    Link to the Github project (Kanban board): Github project

    opened by thecodechaser 1
  • Apply styling

    Apply styling

    This Branch includes the following features:

    • Added styles for Header, Rockets, Missions, MyProfile.
    • Added meta tags with preview and description.
    • Updated Readme file.
    opened by thecodechaser 0
  • Display reserve rocket

    Display reserve rocket

    This Branch includes the following features:

    • Get state in the MyProfile component.
    • Filter state for reserved rockets.
    • Render reserved rockets on the MyProfile component.
    • Apply styling to MyProfile Component.
    opened by thecodechaser 0
  • Switch rocket badge

    Switch rocket badge

    This branch includes the following features:

    • Added cancel button to cancel reservation.
    • Applied styling to cancel button.
    • Added Reserve badge for rockets.
    • Added functionality to switch the badge on condition.
    opened by thecodechaser 0
  • Rocket booking cancelation

    Rocket booking cancelation

    This Branch includes the following features:

    • Updated book rocket function to cancel the reservation.
    • Updated reducer to cancel the rocket reservation.
    opened by thecodechaser 0
  • Rocket book reservation

    Rocket book reservation

    This Branch includes the following features:

    • Added functionality to reserve rocket.
    • Added action for reserve rocket.
    • Updated reducer to update the state.
    • Applied styling for reserve button.
    opened by thecodechaser 0
Owner
Ranjeet Singh
Full-stack software developer, have a huge love for astronomy. Stack: Ruby, Rails, JavaScript, Java. Currently looking for new opportunities.
Ranjeet Singh
GitHub https://space-travelers-thecodechaser.netlify.app/
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.

Space Travelers' Hub A web application for a company that provides commercial and scientific space travel services. The application allows users to bo

Manel Hammouche 8 Oct 14, 2022
Space Traveller hub is a web application that works with the real live data from the SpaceX API

Space Traveller hub is a web application that works with the real live data from the SpaceX API. It's a web application for a company that provides commercial and scientific space travel services.

Roland MWEZE 3 Feb 8, 2022
Travelers' Hub with React and Redux

Spacex Travelers' Hub with React and Redux This website displays a list of all available SpaceX rockets. Users can book each rocket by clicking the re

Azonkeu Ornela 7 Dec 18, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
Single Page Application built using React, Context API and OMDb API.

Movie Search App This project is a React application with functions to search for movies and add movies to favorites using OMDb API. Home Page Favorit

Efecan Pınar 24 Sep 6, 2022
A web application for a company that provides commercial and scientific space travel services.

Space Traveler's Hub Space Traveler's Hub is a project built with React redux, implemented with Ducks files structure and, React Router to interact be

Ismael Antonio 6 Mar 15, 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 using real live data from the SpaceX API.

Leonardo Albornoz 9 Apr 5, 2022
Single Page Application with React, React Router, PostCSS, Webpack, Docker and Docker Compose.

spa-store Single Page Application with React, React Router, PostCSS, Webpack, Docker and Docker Compose. Contributing Feedback Roadmap Releases Check

Luis Falcon 2 Jul 4, 2022
"Math magician is a website for all fans of mathematics. It is a Single Page Application(SPA) that allows users to make simple math calculations and read some math related quotes."

Math Magicians "Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations

Michael_Tamirie 3 Mar 29, 2022
This is a single page application that includes three pages; Home, Calculator and Quotes. You can do Math Calculations and read quotes.

Math magicians app This is a single page application that includes three pages; Home, Calculator and Quotes. You can do Math Calculations and read quo

Lynette Acholah 12 Jun 7, 2022
"BookStore" is a web app for adding books. It is a Single Page App (SPA) that allows users to add and remove a book from the library

BookStore | M3Wx "BookStore" is a web app for adding and removing books from a library storage. It is a Single Page App (SPA) that allows users to add

Alexander Oguzie-Ibeh 4 Apr 11, 2022
Web App to store a list of books (Title and Author) made as a single page app.

Awesome Books This project its an interactive list of books, you can add and remove items to the list. Built With HTML JS Getting Started In this proj

Alex Puente 7 Nov 9, 2022
Math Magicians! This is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make basic calculations and read a random math-related quote.

Math Magicians Math Magicians is the first React Project I'm building. The main objective of this is to understand React features with a project-based

Andrés Felipe Arroyave Naranjo 7 Feb 26, 2022
A Single Page App (SPA) that allows users to: make simple calculations and read a random math-related quote

Math magicians is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: make simple calculations and read a random math-related quote.

Sahar Abdel Samad 13 May 31, 2022
Math magicians is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: Make simple calculations. Read a random math-related quote.

Math Magicians Math magicians is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: Make simple calculations.

null 7 Mar 23, 2022
A fast-searching and space-saving browser specially designed for programmers.

Programmer Browser A fast-searching and space-saving browser specially designed for programmers. ⭐ Support Us If you like our project, do not forget t

Özgür 571 Jan 1, 2023
A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Franklin Okolie 4 Jun 5, 2022
Web Audio API based Pitch Tuner application made with ReactJS.

Pitch Tuner Pitch Tuner is a ReactJS application based on WebAudio API. You can tune your guitar/ukelele from online without any application! The algo

Jalal Uddin 27 Jul 11, 2022
Web application that consumes an API to provide an complete experience of an recipes app

Project: Recipes App Project developed studying in Trybe. Technologies and tools used React React Hooks Context API SCRUM / Kanban Project objective T

Ádran Farias Carnavale 0 Jun 14, 2022