Urban Notes

Urban Notes is a full-featured note-taking application inspired by Google Keep. It allows users to create, organize, and manage notes with rich features like image attachments, checklists, reminders, and archiving.

The application is built with a modern stack featuring React, Express, PostgreSQL, and TypeScript, designed for performance and scalability.

Features

• Rich Note Taking: Create text notes, checklists, and upload photo attachments.
• Organization: Archive notes, move to trash (auto-deleted after 30 days), and pin important notes.
• Search & Filter: Powerful search capabilities to find notes instantly.
• Reminders: Set time-based reminders for your notes.
• Responsive Design: Masonry grid layout that adapts to any screen size.
• Customizable: Choose custom wallpapers and profile images.
• Dark/Light Mode: Full support for system themes.

Technology Stack

• Frontend: React 18, TypeScript, Vite, Tailwind CSS, Radix UI (shadcn/ui), React Query.
• Backend: Node.js, Express, Passport.js.
• Database: PostgreSQL with Drizzle ORM.
• Authentication: Replit Auth (OpenID Connect) / Passport.js.
• State Management: TanStack Query / React Query.

Prerequisites

• Node.js: v20 or higher.
• PostgreSQL: A running PostgreSQL instance.
• NPM: Package manager.

Configuration

Create a .env file in the root directory with the following variables:

# Database Connection
DATABASE_URL=postgresql://user:password@localhost:5432/urbannotes

# Session Secret (random string)
SESSION_SECRET=your_secret_key_here

# Port (Optional, defaults to 5000)
PORT=5000

Installation

1. Clone the repository:

   git clone <repository-url>
   cd urban-notes

2. Install dependencies:

   npm install

3. Setup the Database: Ensure your PostgreSQL database is running and DATABASE_URL is set correctly.

   npm run db:push

   This command uses Drizzle Kit to push the schema changes to your database.

Running the Application

Development

To run in development mode with hot-reloading:

npm run dev

The server will start at http://localhost:5000.

Production Build

To build and start for production:

1. Build the application:

   npm run build

   This compiles the client (Vite) and server (esbuild) into the dist directory.

2. Start the production server:

   npm start

Project Structure

• client/: Frontend React application code.
• server/: Backend Express server and API routes.
• shared/: Shared schemas (Zod/Drizzle) and types used by both client and server.
• migrations/: Database migrations.
• uploads/: Directory for storing uploaded images (created automatically).

Deployment on Render

This project is configured for easy deployment on Render.

1. Create a Blueprint: Connect your GitHub repository to Render.
2. Auto-Configuration: Render will detect render.yaml and automatically set up:
   • A Web Service for the Node.js application.
   • A Managed PostgreSQL database.
   • Persistent disk storage for image uploads.
3. Database Migration: The build command automatically runs npm run db:push to set up your tables.

Your application will be live at https://your-app-name.onrender.com.