Project to Test Knowledge in ReactJS


General: Badge

Backend: Badge Badge

Web front end: Badge

Project Status

🚧 under development

🔗 Project description

In this challenge project I demonstrate my knowledge in TypeScript, NodeJS, PostgreSQL and ReactJS.

Libraries used and why:

  1. I used NodeJS with TypeScript on the back end because, in addition to offering typing, it helps me discover errors during development and increases the IntelliSense of VSCode, giving me more productivity. Helps better implement SOLID design patterns.

  2. I used the ReactJS library (with TypeScript) in the front-end to help me in the development and facilitate the development of a Mobile App, if needed. With TypeScript code reuse is simpler and there are compatible libraries to streamline and simplify development.

  3. The Styled-Components library assists me with CSS and defining my custom TAGs in ReactJS, giving me the flexibility to combine CSS3 with TypeScript and have a cleaner and more readable code.

  4. I used PostgreSQL because it is a robust bank, there was no need to use a non-relational bank like MongoDB, or a key-based one like Redis, as it was not necessary to implement caching. ORORM TypeORM is excellent and easy for me to handle relationships and other settings using TypeScript.

  5. The use of the following tools was a requirement of the challenge: - Public API MealDB; - Material-UI (optional); - React Redux.

ℹ️ Functionalities

✔️ Login

✔️ Registration (optional)

✔️ List of recipes

✔️ Details page for a recipe

✔️ Responsiveness in 1080px and 812px (IPhone X)

✔️ Retrieve data from created API and MealDB

✔️ Navigation between pages with passing parameters and / or other information

▶ ️ How to run the application

To run the application just access the folders below, in that order, and follow the respective

  • server - to install the server;
  • web - to install the web front end;

📜 Application Layouts

🌐 Web


🔨 Solving problems

If you find any problem, bug or error tell me here !

Download Details:

Author: MGustav0

Source Code:

#react #reactjs #javascript

Project to Test Knowledge in ReactJS
25.50 GEEK