Skip to content

Project Goals

Jump to bottom
Shubham edited this page Jan 20, 2026 · 2 revisions

🚀 SCNOTES Development Roadmap (4-Week Sprint)

Welcome to the team! This roadmap is designed to take SCNOTES from a basic local-storage app to a full-stack, professional note-taking platform.

🎨 Frontend Roadmap (4 Weeks)

Focus: User Experience (UX), Modern Design, and State Management.

Week 1: Modernizing the Foundation

  • Goal: Transition from Vanilla HTML/CSS to a modern framework.
  • Tasks:
    1. Initialize the project using Vite + React.
    2. Setup Tailwind CSS for styling.
    3. Design a "Clean & Minimalist" layout with a sidebar for categories and a main area for notes.
  • Hints:
    • Use Lucide React for high-quality icons.
    • Focus on a "Mobile-First" responsive design.

Week 2: Auth Integration & State Management

  • Goal: Handle how users log in and how data flows through the app.
  • Tasks:
    1. Create login and registration forms with validation.
    2. Implement Zustand or React Context to manage "Notes" and "User" state.
    3. Create "Protected Routes" (users can't see notes unless logged in).
  • Hints:
    • Store the backend JWT in localStorage or a cookie.
    • Use react-router-dom for navigation.

Week 3: The "Killer" Features

  • Goal: Make the app better than a simple text box.
  • Tasks:
    1. Markdown Support: Use react-markdown so users can write bold, lists, and code blocks.
    2. Live Search: A search bar that filters notes as the user types.
    3. Dark Mode: A toggle for late-night note-taking.
  • Hints:
    • Use a debounce function for search to avoid too many re-renders.
    • Tailwind's dark: modifier is your best friend here.

Week 4: Polish & PWA

  • Goal: Make it feel like a premium product.
  • Tasks:
    1. Animations: Use Framer Motion for smooth fades and slide-ins when adding/deleting notes.
    2. PWA Support: Make the app "Installable" on phones.
    3. Deployment: Push to Vercel or Netlify (Free).
  • Hints:
    • Check "Vite PWA Plugin" for easy setup.
    • Ensure all buttons have hover and active states for feedback.

⚙️ Backend Roadmap (4 Weeks)

Focus: API Architecture, Data Security, and Scalability.

Week 1: Database & Auth Setup

  • Goal: Create the "Brain" of the application.
  • Tasks:
    1. Setup a Node.js + Express server.
    2. Connect to MongoDB Atlas (Free Tier).
    3. Implement User Sign-up and Login using JWT (JSON Web Tokens).
  • Hints:
    • Use bcrypt to hash passwords before saving them (Never save plain text!).
    • Use dotenv to keep your DB credentials safe.

Week 2: CRUD API (Create, Read, Update, Delete)

  • Goal: Allow the frontend to save and retrieve notes.
  • Tasks:
    1. Create a Note Schema (Title, Content, Folder, CreatedAt, UserID).
    2. Build endpoints: GET /notes, POST /notes, PUT /notes/:id, DELETE /notes/:id.
    3. Ensure users can only see their own notes.
  • Hints:
    • Create a checkAuth middleware to verify the JWT on every request.
    • Log every error to the console for easier debugging.

Week 3: Advanced Organizers

  • Goal: Add logic for sorting and filtering.
  • Tasks:
    1. Tagging Logic: Allow users to add an array of tags to a note.
    2. Search Endpoint: Create a GET /notes/search?q=... using MongoDB $regex.
    3. Pinned Notes: Logic to keep important notes at the top.
  • Hints:
    • Use Mongoose .find({ $or: [...] }) for searching both titles and content.

Week 4: Security & Deployment

  • Goal: Prepare for the public.
  • Tasks:
    1. Rate Limiting: Prevent bots from spamming your API.
    2. API Documentation: Write a simple README explaining how to use each endpoint.
    3. Deployment: Deploy to Render.com (Free tier).
  • Hints:
    • Use cors package to allow your frontend to talk to your backend.
    • Render's free tier "sleeps" after inactivity—mention this in your docs!

🛠️ Recommended Free Tools

Clone this wiki locally