/sun-voyage-client

Front-end for Sun Voyage (pronounced like 'Bon Voyage') app.

Primary LanguageJavaScript

Sun Voyage (API)

This is the frontend for Sun Voyage (pronounced like 'Bon Voyage'), a decoupled fullstack app.

sun-voyage.herokuapp.com

About

Welcome to Sun Voyage! Visit planets and dwarf planets in the Solar System to learn more about each, and to see what your age and weight would be in a different world. Interact with other galactic travelers by sharing your experiences and sight-seeing recommendations in the comments of each planet!

Click here to visit the live site.

Click here to visit the live backend.

And click here to view the server github repo.

You don't need an account to view planets and others' comments, but you will need one to add your own and to update your profile.

Screenshots

Welcome

Planets

Eris

Profile

APOD picture with text

Contributors

Patricia Pan

Elyssa Winch

Yasaman Forouzesh

Technologies Used

  • Javascript/CSS/HTML
  • React
  • MongoDB
  • Express
  • Node
  • Axios
  • Bootstrap
  • Moment

How to Install

If you'd like to set up this project on your local server:

  • Fork and clone this repository
  • Run npm i to install the dependencies listed in package.json
    • Run npm i nodemon (if not already globally installed)
  • Create an .env containing:
    • REACT_APP_APOD_KEY set to an API key to NASA's Astronomy Picture of the Day API
    • REACT_APP_SERVER_URL set to the URL for the backend
  • Run npm start
  • Create a profile, view planets, and broswe APOD pictures!

Timeline

b = backend functionalty; f = frontend functionality.

user = generic user; User = logged in user.

On... We created/implemented the following...
Fri, 2/19/21
  • Project idea
  • React components blueprint (f)
  • RESTful Route paths (b)
  • API for planet info (b)
  • User login (f, b)
  • Account creation from backend (b)
Sat, 2/20/21
  • Atlas cluster (online database, DB) (b)
  • Mongoose model schemas (b)
  • API seeder file (b)
  • Stubbing for files and components/routes (f, b)
  • Navbar partial (f)
Mon, 2/22/21
  • Atlas DB with planet data (from seeder file) (b)
  • User commenting on planets (f, b)
  • Comment editing from backend (b)
  • Navbar styling (f)
Tues, 2/23/21
  • Styling for homepage and planets display (f)
  • Comment deletion from backend (b)
  • User info on Profile page, User info conversions on Planet page
Wed, 2/24/21
  • DB refactor: Object reference Comment schema (instead of Planet subdocument) (b)
  • User commenting with new Comment schema (f, b)
  • User editing Profile (f, b)
  • 'Picture of the Day,' NASA API space photos (f)
  • About page styling, twinkling cover on homepage (f)
Thurs, 2/25/21
  • User comments display on Profile, grouped by Planet (f)
  • User deletion of comments (from Comment, User.comments, and Planet.comments) (f,b)
  • Styling for Astronomy Picture of the Day (APOD)
  • Fresh User token generation when updating Profile (f, b)
  • Deployment to the internet! (f, b)
Fri, 2/26/21
  • Styling for smaller screens (f)
Wed, 3/3/21
  • Fixed bug where 'edit' and 'delete' options weren't showing up right after adding a comment (b)
  • Added redirect to Profile page after creating an account (f)