Update readme

README.md

@@ -1,36 +1,110 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# SQL Playground
+
+An interactive platform to learn SQL fundamentals directly in your browser with hands-on practice. Try it out at [buddysql.seancoughlin.me](https://buddysql.seancoughlin.me)!
+
+## Features
+
+- **Interactive SQL Lessons**: Step-by-step tutorials covering SQL basics to more advanced topics
+- **Live SQL Editor**: Execute queries and see results immediately
+- **Built-in Database**: Practice with a pre-populated e-commerce database
+- **Instant Feedback**: Get helpful error messages and validation for your queries
+- **Progress Tracking**: Your progress is saved automatically to local storage
+- **Zero Backend Required**: Everything runs client-side using SQL.js
+
+## Technology Stack
+
+- **Frontend**: React, Next.js 15
+- **Language**: TypeScript
+- **Styling**: Tailwind CSS
+- **SQL Engine**: SQL.js (SQLite compiled to WebAssembly)
+- **State Management**: React hooks with local storage persistence
 
 ## Getting Started
 
-First, run the development server:
+### Prerequisites
+
+- Node.js 20.x or later
+- npm, yarn, or pnpm
+
+### Installation
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/Scc33/BuddySQL.git
+   cd BuddySQL
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm install
+   # or
+   yarn install
+   # or
+   pnpm install
+   ```
+
+3. Start the development server:
+   ```bash
+   npm run dev
+   # or
+   yarn dev
+   # or
+   pnpm dev
+   ```
+
+4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Project Structure
+
+- `/app`: Next.js app directory structure with pages and layouts
+- `/components`: React components organized by purpose
+- `/hooks`: Custom React hooks including SQL.js integration
+- `/lib`: Utility functions, database initialization, and lesson content
+- `/types`: TypeScript type definitions
+- `/public`: Static assets
+
+## Key Components
+
+- **SqlEditor**: Interactive SQL editor with query execution and feedback
+- **LessonContent**: Markdown-rendered lesson content with code highlighting
+- **useSqlJs**: Custom hook to initialize and interact with SQL.js
+- **lessons.ts**: Content and structure of all SQL lessons
+
+## Database Schema
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+The application includes a sample e-commerce database with the following tables:
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+- **Customers**: customer information
+- **Products**: product catalog
+- **Orders**: order information
+- **Order_Items**: individual items within orders
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Available Lessons
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+1. Introduction to SQL
+2. SELECT Basics
+3. Filtering with WHERE
+4. Sorting Results
+5. Aggregate Functions
+6. Grouping Data
+7. Basic JOINs
 
-## Learn More
+## Contributing
 
-To learn more about Next.js, take a look at the following resources:
+Contributions are welcome! Feel free to submit a Pull Request.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+1. Fork the repository
+2. Create your 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
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## License
 
-## Deploy on Vercel
+This project is licensed under the MIT License - see the LICENSE file for details.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Acknowledgments
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+- [SQL.js](https://github.com/sql-js/sql.js/) - SQLite compiled to WebAssembly
+- [Next.js](https://nextjs.org/) - The React framework
+- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework