KennyMwendwaX / i-notes

iNotes is notes web application with CRUD functionalities.

iNotes is a Note Web App utilising Next.js and bootstrapped with create-next-app.

Getting Started

First, Create a .env file in the root directory and add a DATABASE_URL environment variable like:

DATABASE_URL="postgresql://DB_USER:USER_PASSWORD@localhost:5432/DB_NAME"

For this to work correctly you must use a SQL Database, update your database using the prisma schema by running the command:

npx prisma migrate dev

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

API routes can be accessed on

1. http://localhost:3000/api/notes - This api endpoint returns all the notes in the database.
2. http://localhost:3000/api/register - This api endpoint registers a new note and saves to the database.
3. http://localhost:3000/api/update/id - This api endpoint is used to update the selected note contents.
4. http://localhost:3000/api/delete/id - This api endpoint is used to delete the selected note.

Technologies Used

1. Next.js - learn about Next.js features and API.
2. TailwindCSS - A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup..
3. Prisma - It is a next-generation Node.js and TypeScript ORM.
4. React Hook Form - It provides performant, flexible and extensible forms with easy-to-use validation.
5. date-fns -It is modern JavaScript date utility library, date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.
6. React-Icons - Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using..
7. next/font - to automatically optimize and load Poppins, a custom Google Font.

Your feedback and contributions are welcome!