SCRIBLY

Effortless Sticky Notes with Smart Alerts & Customization!
Report Bug · Request Feature . Contribute . Pull Requests . Report Security Issue . Fork the Project

Table of Contents

1. About The Project
   • Features
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Additional Notes
5. Roadmap
6. Contributing
7. Contact
8. Acknowledgments

About The Project

Scribly is a modern sticky note web app designed to enhance productivity and organization. With a sleek and intuitive interface, it allows users to effortlessly add, edit, delete, and organize notes.

Features

• 🔐 Google Authentication – Sign in seamlessly with your Google account
• 🔔 Push Notifications – Get real-time alerts for reminders
• 🌙 Dark Mode – Switch effortlessly between light and dark themes
• 🎨 Customizable Background – Personalize your workspace to match your style
• 🖱️ Drag & Drop – Organize your notes with a smooth drag-and-drop experience
• 📌 Multiple Views – Choose between Table View and Card View for better organization
• 📊 Advanced Sorting – Sort notes by title, content, creation date, or alert date for quick access

(back to top)

Built With

Built with cutting-edge technologies to deliver performance and reliability.

• 
• 
• 
• 
• 
• 
• 
• 
• 

(back to top)

Getting Started

Get started quickly with these easy setup instructions.

Prerequisites

Before setting up the project, ensure you have the following installed:

• Node.js – Download Node.js (LTS version recommended)
• PostgreSQL – Install and configure PostgreSQL for database management (Download PostgreSQL)
• npm or Yarn – Comes with Node.js; used to install project dependencies
• Git – Download Git to clone the repository
• Vercel Account – If deploying on Vercel, create a free account at Vercel
• Google Cloud Project – Set up a Google Cloud project for Google Authentication (Guide)
• React – No additional setup required, but familiarity with its API may be useful (Open Library API Docs)

Additionally, having a basic understanding of the following will be helpful:

• CSS – For styling and responsive design adjustments

Installation

Follow these steps to set up the project locally:

1. Clone the Repository

   git clone https://github.com/akash85246/Scribly.git
   cd Scribly
   

2. Install Dependencies

   npm install

3. Set Up Environment Variables

   VITE_BASE_URL=<frontend-url>  # Example: http://localhost:5174
   
    VITE_BACKEND_URL=<backend-url>  # Example: http://localhost:5001
    
    VITE_PORT=<frontend-port>  # Default: 5174
    VITE_WEB_PUSH_PUBLIC_KEY=<your-web-push-public-key>
   

4. Change git remote url to avoid accidental pushes to base project

   git remote set-url origin github_username/repo_name
   git remote -v # confirm the changes

5. Run the Project

   npm run dev

(back to top)

Usage

Once the project is running, you can use the following features:

1. Google Authentication

   • Click the "Sign in with Google" button on the homepage.
   • Sign in using your Google account to access your personalized dashboard.

2. Add Sticky Note

   • Click the "New" button in the navigation bar.
   • Enter the note details (title, content, and optional alert).
   • Save your note, which will be displayed on the main page.

3. Edit Sticky Note

   • Browse your existing notes on the homepage.
   • Click on a note to edit its content.
   • Alternatively, use the search bar to find a specific note quickly.

4. Add Alert

   • Set a reminder for a note while creating or editing it.
   • Receive push notifications when the alert time is reached.

5. Dark Mode

   • Toggle between light and dark themes from the settings.
   • Your preference is saved for a seamless experience.

6. Drag & Drop Sticky Notes

   • Rearrange notes effortlessly by dragging them around.
   • Organize your notes in a way that suits your workflow.

7. Change View

   • Switch between Table View and Card View for better note management.

8. Sort Notes

   • Sort notes based on title, content, creation date, and alert date.

9. Responsive Design

   • Works flawlessly on both desktop and mobile devices.

Additional Notes

• Database: Ensure that your PostgreSQL database is running and properly seeded with initial data if required.
• Deployment: The project can also be deployed to platforms like Vercel or Netlify for wider access.
• Customization: Modify the .env file for custom configurations such as port, Google credentials, or database URLs.

(back to top)

Roadmap

Here are the planned improvements and features for the project:

• Google Authentication for user login.
• Sticky note management (add, edit, delete notes).
• Push notifications for note alerts.
• Dark mode toggle for better accessibility.
• Drag & drop functionality for note organization.
• Sort notes by title, content, creation date, and alert date.
• Toggle between Table View and Card View.
• Responsive design for both desktop and mobile devices.
• Customizable themes for better personalization.

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project

   • Click the "Fork" button at the top-right corner of this page to create a copy of the repository in your GitHub account.

2. Clone the Repository

   • Clone your forked repository to your local machine:

     git clone https://github.com/your-username/Scribly.git

3. Create Your Feature Branch

   • Navigate to your project folder and create a new branch for your feature:

     git checkout -b feature/AmazingFeature

4. Commit Your Changes

   • After making the necessary changes, commit them:

     git commit -m 'Add some AmazingFeature'

5. Push to the Branch

   • Push your changes to your forked repository:

     git push origin feature/AmazingFeature

6. Open a Pull Request

   • Go to the original repository (akash85246/Scribly), and open a pull request to merge your feature branch into the main branch.
   • Provide a brief description of the changes you've made and submit the pull request for review.

Top contributors:

(back to top)

Contact

Akash Rajput - @akash_rajp91025 - akash.rajput.dev@gmail.com

Project Link: https://github.com/akash85246/Scribly

(back to top)

Acknowledgments

I would like to extend my gratitude to the following resources and individuals:

• Google Authentication – For enabling secure sign-in functionality.
• Vercel – For providing seamless deployment and hosting for the frontend.
• PostgreSQL – For offering a robust and scalable database solution.
• Node.js & Express.js – For powering the backend and handling API requests.
• React.js – For building a dynamic and interactive user interface.
• Redux – For managing application state efficiently.
• Web Push API – For enabling push notifications to alert users.
• Draggable.js – For implementing smooth drag-and-drop functionality.
• MDN & DevDocs – For providing excellent documentation and resources.
• Open Source Community – For their contributions to the tools and libraries that made Scribly possible.
• Friends & Peers – For feedback and testing that helped improve the project.

(back to top)