Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fredvuni/react-todo
A full stack JavaScript app that allows users to sign up, sign in and have their own todo list items
https://github.com/fredvuni/react-todo
mui react reactjs redux redux-thunk
Last synced: about 1 month ago
JSON representation
A full stack JavaScript app that allows users to sign up, sign in and have their own todo list items
- Host: GitHub
- URL: https://github.com/fredvuni/react-todo
- Owner: FREDVUNI
- Created: 2022-08-20T08:54:46.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-10T13:19:01.000Z (almost 2 years ago)
- Last Synced: 2023-03-06T00:12:14.087Z (almost 2 years ago)
- Topics: mui, react, reactjs, redux, redux-thunk
- Language: JavaScript
- Homepage:
- Size: 408 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Full Stack Todo App
This is a full-stack JavaScript application that allows users to sign up, sign in, and manage their own todo list items.
## Features
- User Registration: Users can sign up with their email address and password to create an account.
- User Authentication: Users can sign in with their credentials to access their todo list.
- Todo List: Users can create, view, update, and delete their todo list items.
- User Authorization: Only authenticated users can access their own todo list items.
## Technologies Used
- **Frontend**: HTML, CSS, JavaScript, React Js, MUI
- **Backend**: Node.js, Express.js, MongoDB
- **Authentication**: JSON Web Tokens (JWT)
- **Database**: MongoDB
## Prerequisites
Before running the application, ensure that you have the following prerequisites installed:
- Node.js: [https://nodejs.org](https://nodejs.org)
- MongoDB: [https://www.mongodb.com](https://www.mongodb.com)
## Getting Started
### Backend Setup
1. Clone the backend repository from GitHub:
```shell
git clone https://github.com/FREDVUNI/node-todo-app.git
```
2. Install the dependencies:
```shell
cd node-todo-app
npm install
```
3. Configure the environment variables:
- Create a `.env` file in the root directory of the backend project.
- Copy the contents of `.env.example` into `.env`.
- Update the environment variables with your own values, such as the MongoDB connection URL and JWT secret.
4. Start the backend server:
```shell
npm start
```
The server will start running at `http://localhost:5000`.
### Frontend Setup
1. Clone the frontend repository from GitHub:
```shell
git clone https://github.com/FREDVUNI/react-todo.git
```
2. Install the dependencies:
```shell
cd your-frontend-repo
npm install
```
3. Update the API endpoint:
- Open the frontend project in your favorite code editor.
- Locate the API endpoint configuration file (e.g., `src/api/config.js`).
- Update the `API_URL` variable to `http://localhost:5000` (or the appropriate backend URL if different).
4. Start the frontend development server:
```shell
npm run serve
```
The frontend will be accessible at `http://localhost:8080` (or a different port if specified).
## Usage
1. Open the application in your web browser.
2. Sign up with your email address and password to create an account.
3. Sign in with your credentials to access your todo list.
4. Create new todo items, mark them as completed, update their details, or delete them as needed.
5. Sign out to securely log out of your account.
## Contributing
Contributions are welcome! If you'd like to contribute to this project, please follow these steps:
1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them.
4. Push your changes to your fork.
5. Submit a pull request with a detailed description of your changes.
## Contact
For any inquiries or feedback, please contact [[email protected]].