Notes App

SoyaChunkz
2

HashNotes is a note-taking web app developed using the MERN stack (MongoDB, Express.js, React, Node.js). It integrates JWT (JSON Web Tokens) for secure login and signup functionalities. It features a modern UI design utilizing Tailwind CSS with support for both light and dark themes.

Download

HashNotes

HashNotes is a dynamic web application designed for personal and collaborative note-taking. It features a visually appealing and user-friendly interface, supporting seamless note management with advanced functionalities.

Features

Responsive Design: Fully responsive design with switchable dark and light themes.
User Authentication: Secure login and signup with JSON Web Tokens (JWT).
Rich Text Editor: Create and edit notes with a rich text editor.
Advanced Search: Efficiently search notes with advanced functionality.
Tag Management: Organize and manage notes with tags.
Pinned Notes: Pin important notes for quick access.
Email Validation: Ensure valid email addresses during registration.

Technologies Used

Frontend: React.js, Tailwind CSS
Backend: Node.js, Express.js
Database: MongoDB
Authentication: JWT
Deployment: Vercel
APIs: RESTful APIs
Other: CSS, JavaScript, Postman

Screenshot

Welcome to HashNotes Home page

Go to SignUp page and create a user

This is the Dashboard where you can add, edit, delete, pin and view your notes

Add your first note here, feel free explore all the content options in the rich text editor Add Notes Note Added

You can edit your notes anytime just with a double click Edit Notes

You switch between light and dark themes anytime just with a click Switch Themes

Getting Started

To get started with HashNotes locally, follow these steps:

Clone the repository:

git clone https://github.com/SoyaChunkz/Notes-App.git

Navigate from the project's root directory and install dependencies for both frontend and backend:

For frontend
```
 cd frontend/HashNotes
 npm install
```
For backend
```
 cd backend
 npm install
```

Set up environment variables:

Create a .env file in the backend directory and add your environment variables such as MongoDB URI and JWT secret.
```
ACCESS_TOKEN_SECRET=your_jwt_secret
MONGODB_CONNECTION_STRING=your_mongodb_uri
```

In the frontend add your backend's base url in constants.js

cd frontend/HashNotes/src/utils/constants.js

export const BASE_URL = "http://localhost:8000"

Run the application:

Start the backend server:
```
cd backend
npm start
```
Start the frontend server:
```
cd frontend/HashNotes
npm run dev
```

Access the application:

Open your browser and go to http://localhost:5173 to see the application in action.

Contribution

Contributions are welcome! If you'd like to contribute to HashNotes, please follow these steps:

Fork the repository.
Create a new branch (git checkout -b feature-branch).
Make your changes.
Commit your changes (git commit -m 'Add some feature').
Push to the branch (git push origin feature-branch).
Open a pull request.

Future Scope

Currently working on creating an extension for HashNotes which would allow users to add note from any webpage directly to to their HashNotes account.

Contact

If you have any questions or suggestions, feel free to reach out:

Email: sameermaroof26@gmail.com LinkedIn: Connect here

Top categories