todo-list

React todo application implemented with MongoDB and genezio

This is an example of a todo application that uses React for the frontend application and Genezio for deploying and developing the backend.

Prerequisites

• ✅ NodeJs >= 18.0.0
• ✅ npm
• ✅ genezio

1. Host a Mongo Database. Follow this tutorial to get a free tier database.
2. Create a server/.env file and add the following environment variables:

MONGO_DB_URI=<your-mongo-uri>

Project Structure

Inside the project folder, you will find the following files and folders:

├── server/
│   ├── package.json
│   ├── task.js
│   └── models/
├── client/
│   ├── src/
│   ├── public
│   ├── package.json
├── genezio.yaml
├── README.md
└── tsconfig.json

Genezio looks for genezio.yaml to read the settings for deploying the project or for spinning a local dev server for testing.

The backend directory contains the implementation of the server side of the project.

The frontend directory contains a simple NodeJS application that talks with the genezio server.

To glue this two component together, an auto-generated SDK is installed in the client/node_modules folder. This can be used by simply importing it into the frontend source code like any other dependency of your project.

Run the project

Clone this example

Clone the repository:

git clone https://github.com/Genez-io/genezio-examples

Navigate to the following directory:

cd ./genezio-examples/javascript/todo-list

Test your project locally

Test the project locally:

genezio local

Open a new terminal, navigate to the following directory, and run npm start to launch the React application:

cd ./client
npm run install-local-sdk
npm start

Deploy your project with genezio

If you wish to deploy your project to the Genezio infrastructure, follow these steps:

Log in to Genezio using the command genezio login:

genezio login

Deploy your project using the genezio deploy command from the ./genezio-examples/javascript/todo-list directory.

genezio deploy

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install -g genezio	Installs genezio globally
genezio login	Logs in to genezio
genezio local	Starts a local server
genezio deploy	Deploys a production project
genezio --help	Get help using genezio

Want to learn more?

Check out:

• Official genezio documentation
• Web development tutorials
• Discord channel

Contact

If you need support or you have any questions, please join us in our Discord channel. We'd love to chat!

Built With

• Genezio
• Node.JS