React Extended Brain

A full-stack personal knowledge management system built with React and TypeScript. Extended Brain helps users organize, store, and retrieve information efficiently, serving as a second brain for managing personal knowledge and insights.

🌐 Live Demo: https://react-extended-brain-u4n1.vercel.app

📋 Table of Contents

• Overview
• Features
• Tech Stack
• Project Structure
• Getting Started
• Development
• Deployment
• Contributing
• License

🎯 Overview

Extended Brain is a modern knowledge management application that allows users to capture, organize, and access their thoughts, notes, and information in a structured way. Built with a focus on user experience and performance, it provides a seamless interface for managing personal knowledge bases.

✨ Features

• User Authentication: Secure user registration and login system
• Content Management: Create, read, update, and delete notes and content
• Profile Management: Personalized user profiles and settings
• Responsive Design: Fully responsive UI built with Tailwind CSS
• Type-Safe: Built entirely with TypeScript for enhanced reliability
• Modern UI Components: Clean and intuitive user interface
• Fast Performance: Optimized with Vite for lightning-fast development and builds

🛠 Tech Stack

Frontend (/project)

• React 18 - Modern UI library
• TypeScript - Type-safe JavaScript
• Vite - Next-generation frontend tooling
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Beautiful icon library
• React Router (implied from pages structure) - Client-side routing

Backend (/secondbrain)

• Node.js - JavaScript runtime
• TypeScript - Type-safe backend development
• Express - Web application framework
• Database integration (schema and db files present)

📁 Project Structure

react-extended_brain/
├── project/                    # Frontend application
│   ├── src/
│   │   ├── components/        # Reusable React components
│   │   │   ├── content/       # Content-related components
│   │   │   ├── layout/        # Layout components
│   │   │   └── ui/            # UI primitives
│   │   ├── pages/             # Page components
│   │   │   ├── auth/          # Authentication pages
│   │   │   ├── content/       # Content management pages
│   │   │   └── profile/       # User profile pages
│   │   ├── services/          # API services and integrations
│   │   ├── store/             # State management
│   │   ├── types/             # TypeScript type definitions
│   │   ├── utils/             # Utility functions
│   │   ├── App.tsx            # Main application component
│   │   ├── main.tsx           # Application entry point
│   │   └── index.css          # Global styles
│   ├── index.html             # HTML entry point
│   ├── vite.config.ts         # Vite configuration
│   ├── tailwind.config.js     # Tailwind configuration
│   └── package.json           # Frontend dependencies
│
└── secondbrain/               # Backend application
    ├── src/
    │   ├── index.ts           # Server entry point
    │   ├── db.ts              # Database configuration
    │   ├── schema.ts          # Database schema
    │   └── middleware.ts      # Express middleware
    ├── tsconfig.json          # TypeScript configuration
    └── package.json           # Backend dependencies

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn package manager
• Git

Installation

1. Clone the repository

git clone https://github.com/Ekagra444/react-extended_brain.git
cd react-extended_brain

2. Install Frontend Dependencies

cd project
npm install

3. Install Backend Dependencies

cd ../secondbrain
npm install

4. Environment Setup

Create .env files in both project and secondbrain directories:

Frontend (.env)

VITE_API_URL=http://localhost:3000

Backend (.env)

PORT=3000
DATABASE_URL=your_database_url
JWT_SECRET=your_jwt_secret
NODE_ENV=development

5. Database Setup

Run database migrations (if applicable):

cd secondbrain
npm run migrate

💻 Development

Running the Frontend

cd project
npm run dev

The frontend will start on http://localhost:5173

Running the Backend

cd secondbrain
npm run dev

The backend will start on http://localhost:3000

Available Scripts

Frontend (/project)

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint
• npm run typecheck - Run TypeScript type checking

Backend (/secondbrain)

• npm run dev - Start development server with hot reload
• npm run build - Compile TypeScript
• npm start - Start production server
• npm run typecheck - Run TypeScript type checking

🧪 Testing

# Run frontend tests
cd project
npm test

# Run backend tests
cd secondbrain
npm test

📦 Building for Production

Frontend

cd project
npm run build

The production-ready files will be in the dist directory.

Backend

cd secondbrain
npm run build

The compiled JavaScript will be in the dist directory.

🚢 Deployment

Frontend Deployment (Vercel)

The frontend is deployed on Vercel. To deploy your own instance:

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Configure environment variables
4. Deploy

Backend Deployment

The backend can be deployed to services like:

• Heroku
• Railway
• Render
• AWS EC2/ECS
• DigitalOcean

Ensure you configure environment variables and database connections appropriately.

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Coding Standards

• Follow TypeScript best practices
• Use ESLint and fix all linting errors
• Write meaningful commit messages
• Add comments for complex logic
• Update documentation as needed

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

Ekagra

• GitHub: @Ekagra444
• Project Link: https://github.com/Ekagra444/react-extended_brain

🙏 Acknowledgments

• React team for the amazing framework
• Vite team for the blazing-fast build tool
• Tailwind CSS for the utility-first CSS framework
• All contributors who help improve this project

📧 Support

If you have any questions or need help, please:

• Open an issue on GitHub
• Contact the maintainer through GitHub

---

Note: This project is actively maintained. Star ⭐ the repository if you find it useful!