Build a notekeeper application (think Google Keep).
- React
- TypeScript
- Firebase
- Firestore
- Tailwind CSS
- Vite
-
Clone the repository
git clone https://github.com/anjola-adeuyi/NoteKeeper-Application.git
-
Install dependencies
npm install
-
Create a
.envfile in the root directory of your project and add your Firebase configuration information:
VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-auth-domain
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-storage-bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
VITE_FIREBASE_APP_ID=your-app-id
-
Start the development server
npm run dev -
Visit http://localhost:3000 to view the application in your browser.
To add a new note, click on the "New Note" button at the bottom of the screen. This will open a form where you can enter a title, tagline, and body for your note. Once you have entered your information, click the "Save" button to save your note.
To edit an existing note, click on the note you want to edit in the grid layout. This will open a form with the existing title, tagline, and body filled in. You can make changes to any of these fields and then click the "Save" button to update your note.
To pin a note, click on the pin icon on the top right corner of the note. Pinned notes will always appear at the top of the grid layout, regardless of when they were created or last edited.
To navigate between pages, use the pagination buttons at the bottom of the screen. Each page can contain a maximum of 6 notes.
To deploy the application, run the following command:
npm run build
This will create a dist directory containing all the necessary files to deploy the application. You can then deploy the application to your preferred hosting service.
The NoteKeeper Application is a simple yet powerful note-taking tool that allows multiple users to add and edit notes without the need for a sign-in process. The application uses React, TypeScript, Firebase, Firestore, Tailwind CSS, and Vite to deliver a smooth user experience.
