Skip to content

Latest commit

 

History

History
128 lines (90 loc) · 6.63 KB

README.md

File metadata and controls

128 lines (90 loc) · 6.63 KB
Raw

Team Intergalactic Presents: Intergalactic Planetary - Backend

A full-stack application which teaches students about our solar system. The Homepage lets the user flip through all the planets within the solar system (which includes Pluto), gives the user other resources to extend their knowledge (we recommend checking out the solar system rap!), and a few fun facts about our solar system.

The planet cards on the home page have a 'Learn more' section where the user is directed to the individual page for that planet. The planet cards also have a locate button and when selected the planet is located on the solar system within the banner on the homepage.

Each planet has it's own planet page. The planet page includes basic information about the planet, 3 identifying facts on the specific planet, and the moons for the specific planet. Up to 10 moons for each planet are shown with the name of the moon, the size, and the name history for that moon.

The application if fully responsive in mobile, tablet, and desktop.

The project is a week long hackathon with a team consisting of three developers who came together through the Hackathon discord channel, wireframed an idea, planned tickets/tasks through a Trello board, and communicated daily via Discord.

Created by Team Intergalactic 🚀

Hackathon Parameters

This application was developed for a Dear Junior Dev Hackathon, between March 24 and April 2, 2023. Requirements:

Frontend:

  • Each planet of the solar system must have its own profile page.
  • Each page must include at a minimum (Name of the planet, size, distance from the Sun, three identifying facts, solid or gas core, and a visual representation of the planet)
  • NOTE: No images, assets, emojis, or SVGs are permitted. The visual representation of each planet must be made ENTIRELY out of CSS.
  • If the planet has a moon, you must display the following information for every moon (Name, history behind name, and size).
  • Planet pages must include at least two different component styles.
  • If a planet has more than one moon, the moon information must be displayed in repeating elements.
  • All planet and moon content MUST be stored in a database.

Backend:

  • You must use foreign keys.
  • Planets and Moons must be stored separate from one another.
  • You must incorporate one ENUM for the planet data.
  • ENUM used for the planet data is the type of planet: dwarf planet, ice, terrestrial, gas

Homepage:

  • The homepage should be an overview of the solar system.
  • The data included will be up to each team.
  • The homepage must include at least two components that are NOT used on any planet page.
  • Homepage content does not need to be stored in a database and can be coded into your components.

Planning and Preparation Documentation

🖊️ Wireframe

WireFrame

📝 Trello board for tickets/tasks

Ticket board

📸 Visual Presentation

galaticgif

Deployed Site

We deployed using Netlify and Heroku

Check it out 👉 HERE

⚒️ Tools Used

  • React
  • Express
  • Axios
  • Sass
  • MUI
  • MySQL
  • AWS

👩‍💻 Local Installation : Backend

  1. To start using this app you first need to clone the repository: git clone git@github.com:guyfarley/solar-system-backend.git
  2. Then you will need to install all the required packages for the application. Run this command (if you're using npm): npm i
  3. Create a .env while the following labels. After each '=' you will need to have required information in single quotes
DB_HOST = 'solar-system-project.cbweyfkwj9c9.us-east-2.rds.amazonaws.com'
DB_PASS = 'marchquackathon'
DB_USER = 'admin'
DB_NAME = 'solar-system-project'

  1. Run the backend by the following command: npm start

  2. Clone and run the frontend by going to the following repo: https://github.com/guyfarley/solar-system-frontend

  3. Following the README file within the frontend repo to clone and run the frontend.

Development Information

Our backend consists of a MySQL database running on Amazon Web Services Relational Database Service and an express server running on Node.JS.

Our MySQL database consists of two tables, one for the planets and one for the moons.

Planet Table

  • A unique planet id
  • The planet name
  • The planet size
  • The planet's distance from the sun in miles
  • The planet's number of moons
  • An enum representing the planet's type (terrestrial, ice giant, dwarf planet, or gas giant)
  • The length of the planet's moon in earth days
  • A description of the planet's atmosphere

    • Moon Table

  • A unique moon id
  • A foreign key linking it to the planet it belongs to (planet id)
  • The moon's name
  • The history behind the moon's name

    • On the server side we start an express app and have it listen to the port specified in the .env file or it defaults to listening to 8080.

    We establish the endpoints we listen to using an express router and a controller. For this project we listen to two main endpoints, one for the home page and one for the specific pages for each planet.

    These routes can be found in the routes.js folder as:

    • router.get("/", routeController.home);
    • router.get('/planet/:planet_id', routeController.planet)

    The first route is the home page, the second uses the specific planet id as a route parameter.

    When these two routes are sent a get request from our frontend, they call their respective controller to handle the request.

    In response to the home page, the controller sends a sql query to get the information of all the planets from the planet table so they can be rendered in the planet carousel.

    In response to the second route, the controller queries for the planet specified in route parameter, as well as all the moons associated with that moon. If the planet has no moons (Mercury and Venus), it sends another query to grab only the specified planet's information.

    🔨 Things to Work On

    • Getting the Solar System Banner in mobile to move around on touch so the user can see all the planets