/fe-spacifly-app-react-ts

Travel around the galaxy. Easy, fast, and safe.

Primary LanguageTypeScript

🚀 Spacifly App

An web application built where any person can travel around all the galaxy 🚀. Spacifly hire the best SpaceX's rockets to make the best travel experience.

App Screenshot

Features

  • Rocket listing
  • Rocket details
  • Launch details
  • Launch pagination
  • Booking cart
  • SEO
  • Unit Testing
  • Consuming REST API (SpaceX-API)

Lessons Learned

I learned more about React.js, React Hooks, Redux (Reducers, Actions, Store), Sass, React Context, and TypeScript.

Run Locally

Clone project

  git clone https://github.com/alxmcr/spacifly-app

Go to project directory

  cd spacifly-app

Install NPM dependencies

  npm install

Start the server

  npm run start

Open the browser:

http://localhost:3000

Rutas Habilitadas en la aplicación

  • Home (/)
  • Rockets (/rockets)
  • Rocket details (/rockets/:rocketId)
  • Booking cart (/cart)

Demo

https://spacifly-app.netlify.app/

Screenshoots

App Screenshot

Rockets page - Screenshot

Rocket page - Screenshot

Launch filter - Screenshot

Cart page: Customer form - Screenshot

Tech Stack

  • typescript: "^4.4.4"
  • @testing-library/jest-dom: "^5.14.1"
  • @testing-library/react: "^11.2.7"
  • @testing-library/user-event: "^12.8.3"
  • react: "^17.0.2"
  • react-dom: "^17.0.2"
  • react-redux: "^7.2.6"
  • react-router-dom: "^5.3.0"
  • redux: "^4.1.2"
  • redux-devtools-extension: "^2.13.9"
  • sass: "^1.43.4"

Testing

Testing app

Authors

Credits

Feedback

If you have any feedback, please reach out to me at amcocarojas@gmail.com.