A simple and efficient note-taking app that allows users to create, edit, delete, and view their notes. This app features user authentication, secure storage of notes, and a sleek, responsive UI built with React, TypeScript, Tailwind CSS, and ShadCN UI.
- User Authentication: Sign up, log in, and log out functionality.
- CRUD Operations for Notes: Create, read, update, and delete notes.
- Note Encryption: Securely store note content using encryption.
- Responsive Design: Built for mobile-first, ensuring a smooth experience across devices.
- State Management: Uses Redux for managing authentication state and notes.
- Frontend: Built with React, TypeScript, Tailwind CSS, and ShadCN UI for a modern, clean UI.
- Backend: Node.js and MongoDB for user and note management.
- Deployment: Frontend on Vercel, Backend on Heroku.
- Frontend:
- React
- TypeScript
- Tailwind CSS
- ShadCN UI
- Redux for state management
- Backend:
- Node.js
- Express.js
- MongoDB (for storing users and notes)
- JWT for user authentication
crypto-js
for note encryption
- Deployment:
- Frontend: Vercel
- Backend: Heroku
Before getting started, ensure you have the following installed:
- Node.js (v16 or higher)
- npm (v7 or higher) or yarn
- Git
-
Clone the repository:
git clone https://github.com/your-username/note-taking-app.git
-
Navigate to the frontend directory:
cd note-taking-app/frontend
-
Set up the environment variables for the frontend:
- Create a
.env
file in thefrontend
directory. - Add the following to the
.env
file:VITE_API_BASE_URL=http://localhost:3000
- Create a
-
Install the dependencies:
npm install
-
Start the frontend development server:
npm run dev
The frontend should now be running on http://localhost:5173.
-
Navigate to the backend directory:
cd note-taking-app/backend
-
Set up the environment variables for the backend:
- Create a
.env
file in thebackend
directory. - Add the following to the
.env
file:MONGO_URI=mongodb://localhost:27017/notedDB PORT=3000 JWT_SECRET=test NOTE_SECRET_KEY=test FRONTEND_URL=http://localhost:5173
- Create a
-
Install the dependencies:
npm install
-
Start the backend server:
npm run server
The backend should now be running on http://localhost:3000.
- Frontend: You can deploy the frontend on Vercel by following the deployment steps mentioned here.
- Backend: Deploy the backend on Heroku by following the deployment steps mentioned here.
Ensure that the frontend makes requests to the live backend API URL after deployment. Update the API endpoints in the frontend to match the Heroku backend URL.