/Autoshow

Primary LanguageJavaScriptMIT LicenseMIT

PROJECT

  • Fictitious sports car dealership website developed with React.js, Node.js, and MongoDB Atlas.
  • Front-End designed with React.js components, along with the Axios and styled-components libraries.
  • Back-End coded with Node.js, Express.js, and Mongoose to provide RESTful API routes using HTTP methods, handle JSON objects, and store data in a database on MongoDB Atlas for the Front-End.

INTERFACE

HEADER

Contains navigation buttons for website pages ("Home", "Favorites", and "Race!").

Header

HOME

Features a search bar to filter by a specific car and displays all the car cards from the dealership. On each card, there is an option to add it to the "Favorites" page list when the mouse pointer hovers over it.

Home

FAVORITES

Displays favorited car cards and the option to unfavorite them, with no limit on the number and model of cards.

Favorites

RACE!

Shows only favorited car cards and the option to have them (or not) "compete" based on the horsepower (hp) measurement of two selected cars. In this competition section, the car with the highest power wins and remains.

Race

SIMULATION

To open the project, it is necessary to have an Integrated Development Environment (IDE) installed.
To execute the project, download and install Node.js from the official website.

React.js

  • After cloning the repository, in a new terminal, execute the commands cd PORTFOLIO-AUTOSHOW and cd React.js to navigate to the correct folder. Then, use the command npm install.

  • To view the website, run the command npm start to start the Front-End server. You will be redirected to the URL http://localhost:3000. The server supports hot-reloading, reflecting any code changes instantly in the browser.

Node.js

  • In another terminal, run the commands cd PORTFOLIO-AUTOSHOW and cd Node.js to navigate to the correct folder. Then, use the command npm install dotenv to install an environment variables library.

  • Run the command nodemon server.js to start the Back-End server. It will operate at the URL http://localhost:8000.

NOTES

If you have any doubts, VS Code is a great IDE for this project.

If the initialization commands are run in the terminal before the guided installations, use the shortcut Ctrl + C in terminal to cancel the operation.

The cd.. command allows you to return to the previous folders.

Sometimes, an uncaught runtime error can occur when adding car cards to the competition area due to database delays. If this happens, press F5 on your keyboard to reset the page, remove the car card from the competition area, and try again.

The servers are configured to work on a local network, allowing access from any origin due to general CORS settings.

It is possible to view the JSON objects stored in the MongoDB database by typing /cars, /favorites, or /race after the Back-End server URL http://localhost:8000.

TECHNOLOGIES

Integrated Development Environment (IDE)

Visual Studio Code

  • Visual Studio Code (Source-code editor. Also commonly referred to as VS Code).

Programming Languages

HTML5 CSS3 JavaScript

  • HTML5 (Markup language for structuring web pages).
  • CSS3 (Cascading Style Sheets for styling web pages).
  • JavaScript (Programming language for interactivity and logic on the client side).

Development Frameworks and Libraries

React NodeJS MongoDB

  • React.js (JavaScript library for building user interfaces).
  • Node.js (JavaScript runtime environment on the server side).
  • MongoDB Atlas (Cloud-based NoSQL database service).

Front-End Libraries and Tools

Styled Components

  • styled-components (Library for applying styles to React components).
  • Axios (HTTP client for making API requests).
  • React Router DOM (Library for managing routes and navigation in React applications, allowing the creation of a SPA with page navigation without reloading the page).

Back-End Libraries and Tools

Express.js

  • Express.js (Framework for Node.js that simplifies the creation of servers and APIs).
  • Mongoose (Data modeling library for MongoDB and Node.js).
  • CORS (Security mechanism that allows or restricts requests for resources between different domains, configurable in Express.js to allow the API to be accessed from different origins).
  • dotenv (Library for loading environment variables from a .env file, used to manage sensitive and environment-specific configurations securely).

Development Tools

NPM Nodemon Postman

  • npm (Package manager for Node.js).
  • Nodemon (Tool that automatically restarts the Node.js server upon detecting changes).
  • Postman (Tool for testing and debugging APIs, ensuring server routes work correctly).
  • Git (Version control system for managing code history and collaborating with other developers).