Todo App

📜 Todo App built with React, Vite, TypeScript, GraphQL, Apollo and Codegen

✨ Features

• Add todos
• Delete todos
• Filter Todos by completed tasks and Incompleted tasks
• Save todos to Mongodb when the state changes
• Load the todos from Mongodb when the site is loaded again

💻 Tech Stack

📝 Packages

Frontend

• react
• react-dom
• typescript
• vite
• @mui/icons-material
• @mui/material
• @apollo/client
• @graphql-codegen
• mongoose
• graphql

Backend

• graphql
• graphql-yoga
• mongoose

⚙️ Development

Clone remote repo to your local

git clone https://github.com/adarshpandya-simform/react-vite-ts-graphql-apollo.git

Change directory

cd react-vite-ts-graphql-apollo

Backend

Open new terminal and then setup server.

Change directory

cd server

Install dependencies

npm install

Run server 🎉

npm run dev

Open http://localhost:3000 to view it in the browser.

⚠️ Warning

Remember to rename the .env.example file to .env file and fill in the .env file with appropriate credentials.

Frontend

Change directory

cd client

Install dependencies

npm install

Run React App (will automatically generate types with @graphql-codegen)🎉

npm run dev