This is a full-stack todo list app built with React Native, Zustand, Node.js, Express, and MongoDB. It allows users to create and manage their todo items, mark them as completed or not completed, and view their own todo list only after logging in.
- Installation
- Features
- Technologies Used
- App Architecture
- File Structure
- Screenshots
- Contributing
- License
To install and run the app locally, follow these steps:
- Clone this repository: git clone https://github.com/yashpyraj/todo_server.git
- Install the required dependencies: cd todo_server && yarn
- Start the backend server: yarn server
- Open a new terminal window and start the React Native app: yarn start
- If you're using an iOS device or simulator, run: yarn ios If you're using an Android device or emulator, run:
- User authentication using JWTs
- Create, read, update, and delete todo items
- Mark todo items as completed or not completed
- View todo items in a list sorted by creation date
- View only the authenticated user's todo list
- React Native
- Zustand
- Node.js
- Express
- MongoDB
- React Native Navigation
- Axios
- JSON Web Tokens (JWTs)
The app is built using a client-server architecture. The client side of the app is built using React Native and Zustand for state management. The server side of the app is built using Node.js, Express, and MongoDB.
The app uses React Native Navigation to implement a navigation stack that allows the user to navigate between the login, signup, and todo list screens.
|-- node_modules |-- server | |-- controllers | | |-- auth.js | | |-- todos.js | |-- middleware | | |-- auth.js | |-- models | | |-- Todo.js | | |-- User.js | |-- routes | | |-- auth.js | | |-- todos.js | |-- utils | | |-- generateToken.js | |-- app.js |-- client | |-- node_modules | |-- src | | |-- components | | | |-- TodoItem.tsx | | |-- screens | | | |-- LoginScreen.tsx | | | |-- SignupScreen.tsx | | | |-- TodoListScreen.tsx | | |-- store | | | |-- auth.ts | | | |-- index.ts | | | |-- todos.ts | | |-- App.tsx | |-- index.js | |-- package.json | |-- yarn.lock |-- package.json |-- yarn.lock
The components folder contains the TodoItem component, which is used to render individual todo items.
The screens folder contains the LoginScreen, SignupScreen, and TodoListScreen components, which represent the login/signup screens and the main todo list screen, respectively.
The store folder contains the auth and todos stores, which manage the authentication state and the todo data, respectively.
Finally, the App.tsx file is the entry point of the app, and the index.js, package.json, and yarn.lock files are standard files for a React Native project.