Skip to content

anbreaker/react-proyecto-mu

Repository files navigation

Práctica Final Nº10 Proyecto: Mu – Sistema eGestión 👋


Frontend of Backend on Node Express egestion


Project deployment 📑

This is a small explanation of the final work we delivered for Keepcoding's Full Stack Web Bootcamp IX.

The whole project is supported with the following technologies and running on three different AWS machines.

  1. Machine for Front
  2. Machine for Back and microservice for sending emails.
  3. Database machine

Technologies:

  • Firebase
  • Cloudinary
  • MongoDB
  • NodeJs
  • Frameworks Back: Express
  • Frameworks Front: React (working with Redux) and bootstrap 4
  • Github, For version control

To get the system up and running you can visit https://www.egestion.xyz/



To init simulete project on local first:

Path: git clone https://github.com/anbreaker/react-proyecto-mu

Install all dependencies (Web Application in React) 💾

Path:  cd react-proyecto-mu/
npm i

Install Dependencies of backend egestion 🔧

Path: git clone https://github.com/sebperezCL/backend-proyecto-mu/tree/dev

Install all dependencies of backend egestion (Node Express and Mongo) 🔧

Path:  cd backend-proyecto-mu/
npm i

To start a initial aplication, is necessary open 2 terminal 🏁


1️⃣ Backend on Node, Express, and Mongo 🔨


Runs the app in the development mode.
http://localhost:5000

Path: backend-proyecto-mu/
  • In order to execute the back it is necessary to follow the following steps:
  1. You can copy the .env.example to note that you need a Mongo instance (Mongo Atlas for example or a mauqina running Mongo Atlas).

  2. In addition, we have used Firebase to follow the following authentication pattern:

    • You will need to configure in the front end the connection file with your firebase account You can see the example configuration in the following file. mu-project-d4298-firebase_ExampleConfig.json


Once everything is set up, you can boot into dev mode as follows:

Path: npm run dev

2️⃣ Frontend on REACT (first terminal) 🔨


Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Path: react-proyecto-mu/

You will have to configure on the Frontend for the connection to firebase, cloudinary and other services the environment variables, you can look at the .env.example file.

Once everything is set up, you can boot into dev mode as follows:

Path: npm start

To create a production build folder.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.


3️⃣ Microservice install dependencies services 🔧


Path: git clone https://github.com/LSP-92/email-microservice

This is a very quick and concise 1:20 presentation on the WebApp (click on the image) 📼




To see a practical example of the use of egestion click on the image 📼



Authors

👤 Sebastián Pérez Morales

👤 Luis Sánchez Prudencio

👤 Francisco Javier Antúnez Durán

Contac Us


Show your support

Give a ⭐️ if this project helped you!

About

react-proyecto-mu

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages