This note app allows users to create, view, edit, and delete notes. Each note has a title, content, a random color, and a timestamp. Users can also upload profile images and manage their accounts. The application uses React for the frontend, Node.js with Express for the backend, MySQL as the database, and libraries like yup for form validation and react-toastify for notifications.
- User Authentication: Login and Signup functionalities.
- Note Management: Add, view, edit, and delete notes.
- Random Note Color: Notes are automatically assigned random colors.
- Notifications: Success and error notifications using
react-toastify.
- Frontend: React.js, Axios, React-Router, Toastify, React-icons
- Backend: Node.js, Express.js, Sequelize ORM, MySQL
- Validation: Yup with
react-hook-form - Database: MySQL with Sequelize
- Styling: Tailwind CSS (or relevant styles)
notapp/
├── node_modules/
├── public/
│ ├── index.html
├── src/
│ ├── assets/
│ │ ├── home.png
│ │ ├── logo.png
│ │ ├── not-found-image.png
│ │ └── no-profile.jpg
│ ├── components/
│ │ ├── auth/
│ │ │ ├── Login.jsx
│ │ │ └── Signup.jsx
│ │ ├── footer/
│ │ │ └── Footer.jsx
│ │ ├── header/
│ │ │ └── Navbar.jsx
│ │ ├── Card.jsx
│ │ ├── EditProfile.jsx
│ │ ├── EmptyNote.jsx
│ │ ├── FormErrMsg.jsx
│ │ └── PageNotFound.jsx
│ ├── context/
│ │ └── NotesContext.jsx
│ ├── helpers/
│ │ └── data.js
│ ├── pages/
│ │ ├── Home.jsx
│ │ ├── Notes.jsx
│ │ ├── Note.jsx
│ │ ├── Profile.jsx
│ │ └── PageNotFound.jsx
│ ├── routes/
│ │ └── PrivateRoutes.jsx
│ ├── tests/
│ │ ├── components/
│ │ │ ├── EditProfile.test.jsx
│ │ │ ├── EmptyNote.test.jsx
│ │ │ ├── NoteCard.test.jsx
│ │ │ └── PageNotFound.test.jsx
│ │ ├── pages/
│ │ │ ├── NoteEditor.test.jsx
│ │ │ ├── Notes.test.jsx
│ │ │ └── Profile.test.jsx
│ └── utils/
│ ├── generateId.js
│ ├── RandomColor.js
│ └── utility.js
├── .gitignore
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── vite.config.js
├── setupTests.js
└── README.md
notapp_server/
├── config/
│ └── config.json
├── middlewares/
│ ├── AuthMiddleware.js
│ └── upload.js
├── models/
│ ├── index.js
│ ├── Notes.js
│ └── Users.js
├── routes/
│ ├── Notes.js
│ └── Users.js
├── uploads/
│ └── profileImage-[filename]
├── .gitignore
├── package-lock.json
├── package.json
├── server.js
└── .env
-
Notes Model
- Fields:
id: UUID, primary keytitle: Note titlecontent: Note contentdate: Timestamp (default: current date)notecolor: Randomly generated coloruserId: Foreign key linking to theUsersmodel
- Associations:
- Belongs to
Usersmodel
- Belongs to
Notes.belongsTo(models.Users, { foreignKey: "userId", onDelete: "CASCADE", });
- Fields:
-
Users Model
- Fields:
username: Username of the userpassword: Encrypted passwordemail: Email addressprofileImage: Optional profile image URL
- Associations:
- Has many
Notes
- Has many
Users.hasMany(models.Notes, { foreignKey: "userId", onDelete: "CASCADE", });
- Fields:
- POST
/auth/signup: Register a new user. - POST
/auth/login: Authenticate user and return a JWT token.
- GET
/notes: Fetch all notes for the logged-in user. - POST
/notes: Create a new note. - PUT
/notes/:id: Edit an existing note. - DELETE
/notes/:id: Delete a note.
NotesContext is used to manage state for notes throughout the application.
-
Card.jsx
- Displays a grid of notes.
- Clicking a note navigates to the note detail page.
-
NoteEditor.jsx
- Allows users to add or edit notes.
- Uses
react-toastifyfor notifications on save.
-
Login.jsx
- Handles user login using
react-hook-formandyup.
- Handles user login using
const getRandomColor = () => {
const primaryColors = ["#1E90FF", "#FF4500"];
const secondaryColors = ["#32CD32", "#FFD700"];
const allColors = [...primaryColors, ...secondaryColors];
return allColors[Math.floor(Math.random() * allColors.length)];
};<div
key={note.id}
className="card"
style={{ backgroundColor: note.notecolor }}
onClick={() => navigate(`/notes/${note.id}`)}
>
<h2>{note.title}</h2>
<p>{note.content}</p>
</div>Create a .env file in the backend directory:
DB_NAME=your_database_name
DB_USER=your_username
DB_PASSWORD=your_password
DB_HOST=localhost
DB_PORT=3306
JWT_SECRET=your_jwt_secret
- Install dependencies:
npm install
- Start the server:
npm run dev
- Make sure the MySQL server is running.
- Install dependencies:
npm install
- Start the development server:
npm run dev
- Add user roles (e.g., admin).
- Enable searching and filtering notes.
- Integrate file uploads for attachments.
- Implement a dark mode.