This project's frontend was bootstrapped with Create React App, and is availble for forking at the Frontend_Repo, while it's backend was created with Node & Nodemon, and is available for forking at the Backend_Repo.
Firstly, make sure to fork or copy both the frontend and backend from their Git Repositories.
We recommend keeping both within the same directory in your computer for easy access. If using VS Code it's ideal to open the containing directory to view the entirety of the project.
Make sure to create a MongoDB database for this project. You will need it to be set up before the project is fully functional.
You can set it up using MongoDB Desktop while in development, but using MDB Atlas is easy, starts free and cloud based, making it easy for deployment.
You also use MDB Compass or Studio 3T as Free GUIs to manage the database from your desktop.
Once you have a copy both repos in your computer, you will need to create a '.env' file, with the following lines:
REACT_APP_MONGO_URI = 'URI' #(replace URI here with the uri to your database)
REACT_APP_SERVERPORT = PORT1 #(replace PORT1 here with the number of the port you are using, such as 8080)
Then from a terminal inside the project's backend directory run the following commands:
$ npm install
$ npm run dev
Runs the Backend in the development mode using nodemon.
Got to http://localhost:PORT1 to confirm functionality of it in your browser.
The page will reload as you make changes to your code - works similar to React.
Keep an eye on your terminal for prompts of feedback.
meanwhile you will need to create a '.env' file here as well, with the following lines:
REACT_APP_BACKEND_URL = 'URL' #(replace URL here with the url to your backend, such as 'http://localhost:PORT1')
REACT_APP_MONGO_URI = 'URI' #(replace URI here with the uri to your database)
REACT_APP_PORT = PORT2 #(replace PORT2 here with the number of the port you are using, such as 3000)
Then from a terminal inside the project's frontend directory run the following commands:
$ npm install
$ npm start
Runs the app in the development mode.
Got to http://localhost:PORT2 in the browser.
The page will reload as you make changes to your code - works similar to Nodemon.
Keep an eye on your terminal for prompts of feedback.
Make sure to have a different ports for front and backend.
$ 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.
The build is minified and the filenames include the hashes.\
For Deployment, in case the user does not yet have a setup account they often use for deploying similar projects on, such as Digital Ocean, or Heroku, one valid option for first time deployment is Render which can deploy from github.
In addition to creating two 'web services' for deployment using Render, one for front and one for the backend, both deploying from github, I used ENV variables that I then passed along their info at Enviroment 'key:value' slots, and creating a new cloud MongoDB at Atlas and connecting the three.
Core Programs - MERN Stack: MongoDB, Express, React & Node.
Periferal Programs: body-parser, cors, dotenv, mongoose, axios & bootstrap.
Development Program: nodemon.
The App is focussed on providing the functionality of an online bank, capable of holding accounts information on a database, and update each individual account's balance based on prompts from actions executed on the frontend, using calls to the back end, to either deposit or withdraw ammounts.
Creates new accounts and adds them to the database.
Logs the website to one account in particular from the database.
Adds money to the balance of the current logged in account.
Withdraws money from the balance of the currently logged in account.
Copyright (c) 2024 TheoBueno
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.