A web application for a company that provides commercial and scientific space travel services.

Related tags

React react redux api-rest
Overview

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 between the different tabs of the project. In the Rockets tab, you can reserve or cancel a rocket, in the Missions tab you can join and leave a mission, and finally My Profile tab you find your current missions and rockets.

rockets

Built With

  • HTML/CSS
  • JavaScript
  • React Framework
  • Redux

Live Demo

Demo link.

Getting Started

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

  • Clone this repository with git clone https://github.com/ixboy/Space-Travelers-Hub.git using your terminal or command line.
  • Change to the project directory by entering :
    cd Space-Travelers-Hub in the terminal

Prerequisites

You should install in your local machine the last version of React.

Setup

You can clone this repository using the next command: git clone https://github.com/ixboy/Space-Travelers-Hub.git.

Install

After clone the repository, you should to run npm install since the terminal to install all dependencies needed to the correct working of the project.

Usage

You're free to use this project however it is developed for educational purposes. You can check the acknowledgment described below.

Authors

👤 Iyunda Ismael Antonio

👤 Fernando Herrera

Acknowledgments

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.

Comments
  • Setting up the Kanbab board

    Setting up the Kanbab board

    Hi There 💯

    In this issue:

    Please, let us know if we need to make changes.

    opened by fherrerao 2
  • Missions feature

    Missions feature

    Hi @ixboy 💯

    Features in this branch:

    • Get missions information from API.
    • Create a store.
    • Create actions, and reducers.

    Please let me know if I should make changes.

    opened by fherrerao 1
  • Setting up

    Setting up

    Hi @ixboy 💯

    Features in this branch:

    • Create the React-Redux app.
    • Install basic dependencies.
    • Create header.
    • Create navigation between pages.
    • Use of Navlink and style active class.

    Please let me know if I should make changes.

    opened by fherrerao 1
  • Final Project

    Final Project

    Hi @ixboy 💯

    Features of the project:

    • Create a new React-Redux app
    • Use of React router to navigate between pages.
    • Add constants, action, and reducer functions.
    • Set up the store.
    • Use of useSelector hook to display data in Rockets and Missions.
    • Use of dispatch functionality and dispatch actions to reserve, cancel and add buttons.
    • Add styles to the project using bootstrap.
    • We follow the provided design.
    • Add deployment using gh-pages.

    Please let us know if we should make changes.

    opened by fherrerao 0
  • Badges missions

    Badges missions

    Hi @ixboy 💯

    Features in this branch:

    • Create badges: "ACTIVE MEMBER" and "NOT MEMBER".
    • Create buttons: "JOIN MISSION" and "LEAVE MISSION".

    Please let me know if I should make changes.

    opened by fherrerao 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 ixboy 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 ixboy 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 ixboy 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 ixboy 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 ixboy 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 ixboy 0
Owner
Ismael Antonio
Full-Stack Developer | Ruby on Rails | JavaScript | React & Redux | CCNA R&S & CCNA Cyber Ops Certified | I'm available for hire.
Ismael Antonio
GitHub https://ixboy.github.io/Space-Travelers-Hub/
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
As a user, I want to be able to post about travel locations and provide comments and ratings. As a user, I want to be able to look at other users posts and search travel locations by rating.

Travel-bug https://travelbug-project.herokuapp.com/ Table of Contents User-Story Description Installation Usage Contributions Tests License Questions

Megan 3 Mar 2, 2022
ReactJS-Travel-Website - This is a travel(adventure) website made with ReactJS.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Saurav Dhakal 1 Jan 1, 2022
TravelUp is a useful application to organize your travel itinerary.

TravelUp TravelUp is a useful application to organize your travel itinerary. Project for the Computer Networks Course, held in the Academic Year 2021/

null 3 Jul 19, 2022
A web application that allows users to book rockets and join selected space missions, Using the SpaceX API.

Space-Travelers-Hub A web application that allow users to book rockets and join selected space missions, Using the SpaceX API. This project was bootst

Rachid Boudaoudi 6 Dec 9, 2021
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
Space Traveler's Hub is a single page web application that fatches rockets, missions from the SpaceX API.

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.

Ranjeet Singh 14 Oct 20, 2022
Landing page for any SaaS company, using Nextjs and NextUI

NextJS and NextUI Landing Page Template You can deploy here directly to vercel This is a template for NextJS and NextUI. NextJS NextUI You can see the

Mauricio Siu 31 Dec 23, 2022
Part of the 'merged', multi-currency cryptowallet soon to be published for production by the ArcaneCorporations company.

ETH-Wallet A simple ethereum wallet coded with the help of the web3.js library for ease of account-management, the ethereumjs-tx library for mediating

null 5 Dec 5, 2021
An example of a travel style app built with Ionic React

ionic-react-travel-app An example of a travel style app built with Ionic React If you'd like to support, you can buy me a coffee ☕️ Included in this I

Alan Montgomery 29 Sep 27, 2022
WCS : Project 2 (Spatial travel agency)

Concept This template is meant to serve as a foundation for every P2/P3 following the React-Express-MySQL stack, as learned in Wild Code School. It's

Jacques Poulin 3 May 19, 2022
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 8, 2023
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
This solution aims to simplify the implementation of login using SPID or similar services, such as CIE and eIDAS

This solution aims to simplify the implementation of login using SPID or similar services, such as CIE and eIDAS. It supports both the use of ADFS and B2C as identity federators.

Microsoft 19 Dec 2, 2022
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
nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3. Several libraries already exist for React d3 integr

Raphaël Benitte 10.9k Dec 31, 2022
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 8.1k Jan 5, 2023
GitHub action that compares basehead commits and provides all changed files in a pull request or push.

Get PR/push Files Get all added/modified/removed/renamed files in a pull request or push's commits. You can choose to get all files, only added files,

Ruslan Dulina 3 May 21, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023