Website is live on: https://arturos-todolist.cyclic.app/work
This is a to-do list web app with dynamically created routes, and the data from the list is stored in a NoSQL database - MongoDB and managed with the use of mongoose-js. In this project MongoDB Atlas was used, which is a fully-managed cloud database that handles all the complexity of deploying, managing, and healing your deployments on the cloud service provider of your choice (AWS , Azure, and GCP). There are two main routes, the first one is the main route (/) which shows the title "Todo" with three example tasks; the other route is (/about) with an example description. On top of that, whenever the user chooses to access any different routes like "/work", "/school", "/education" etc - by accessing them for the first time, the server will take the name of the route and create from it a collection in the MongoDB database. This is an example of how dynamic routing with parameters works in Express-js. The data is stored in MongoDB, so it will not get lost after resetting the server. The user can delete elements from any list by checking them, this will create a post request that will be processed in the "/delete" route, and the given element will be erased from the database. The users can also add elements to any list by simply typing the task name and hitting the plus sign. This will be processed on the backend, and the right collection will get updated in MongoDB. This web app was developed using Node.js, Express.js, MongoDB, Mongoose, EJS, CSS, HTML, and JavaScript. It was deploy on https://www.cyclic.sh/ .
Useful Links:
MongoDB
https://www.mongodb.com/home
https://www.mongodb.com/docs/manual/
MongoDB Atlas - for running the MongoDB in the cloud
https://www.mongodb.com/docs/atlas/
mongoose
https://mongoosejs.com/
Express.js
https://expressjs.com/
Node.js
https://nodejs.org/en/docs/
body-parser from Node.js
https://www.npmjs.com/package/body-parser
dotenv
https://www.npmjs.com/package/dotenv
nodemon
https://www.npmjs.com/package/nodemon
creating and using custom modules in node
https://nodejs.org/dist/latest-v18.x/docs/api/module.html
templating with EJS
https://ejs.co/#promo
https://github.com/mde/ejs/wiki/Using-EJS-with-Express
lodash
https://lodash.com/
Cyclic
https://www.cyclic.sh/
https://web322.ca/getting-started-with-cyclic.html
Using MongoDB with cyclic
https://docs.cyclic.sh/how-to/using-mongo-db
Example views from the website:
The program was developed using Node.js, Express.js, MongoDB, MongoDB Atlas, Mongoose, EJS, JavaScript, HTML, CSS, lodash, Cyclic - deployment
Steps required to run the server/web application:
- Use 'npm install' command to install the dependencies from package.json.
- Create a free account at https://www.mongodb.com/cloud/atlas/register to manage and run your database from the cloud.
- Next follow the steps from the docs https://www.mongodb.com/docs/atlas/ for:
- Deploy a Database,
- Secure your Database,
MAKE SURE THAT YOU ENABLE "ALLOW ACCESS FROM ANYWHERE" IN THE "Edit IP Access List Entry" IN "Network Access" with "0.0.0.0/0 (includes your current IP address)". https://www.mongodb.com/docs/atlas/security/ip-access-list/#configure-ip-access-list-entries - Connect to your Database
- Change the name of .env.example to .env.
- Define the environmental variables in .env:
MONGODB_URI = "mongodb+srv://username_mongodb_atlas:password_mongodb_atlas@your_uri_mongodb_uri/" - this has to be adjusted as stated in the step 3 (Connect to your Database) , but the part "username_mongodb_atlas:password_mongodb_atlas" needs to stay as in the example above, because the server will replace these values withe the env variables bellow.
MONGODB_ATLAS_USER = "your_user_name_mongodb_atlas" - from step 3 (Secure your Database) - Configure Database Users. MONGODB_ATLAS_PASSWORD = "your_user_password_mongodb_atlas" - from step 3 (Secure your Database) - Configure Database Users. - Start the server file app.js with the command node app.js or nodemon app.js if you wish to enable automatic server reloading after detecting file changes.
- Open your web browser and navigate to localhost:3000, where the website will be live.
======If you wish to host the website on a server, continue the steps below.======= - Create a github account and push your project to a newly created repository (https://github.com/).
- Deploy your project on https://www.cyclic.sh/, following the steps described in the following link: https://web322.ca/getting-started-with-cyclic.html. At the end, don't forget to set your environmental variables.
For help with MongoDB and cyclic: https://docs.cyclic.sh/how-to/using-mongo-db