|
1 | | -## Usage |
| 1 | +# 📝 ToDoApp-SolidJS |
2 | 2 |
|
3 | | -```bash |
4 | | -$ npm install # or pnpm install or yarn install |
| 3 | +A modern, Todo application built with SolidJS, featuring a clean UI and full CRUD functionality. |
| 4 | + |
| 5 | +## ✨ Features |
| 6 | + |
| 7 | +- 🎯 **Full CRUD Operations** - Create, read, update, and delete tasks |
| 8 | +- 🎨 **Modern UI** - Clean and responsive design |
| 9 | +- ⚡ **SolidJS Frontend** - Fast and efficient reactive framework |
| 10 | +- 🔧 **Json-Server Mock** - RESTful API with Json-Server |
| 11 | +- 🐳 **Docker Support** - Easy deployment with Docker Compose |
| 12 | +- 📱 **Responsive Design** - Works on desktop and mobile devices |
| 13 | + |
| 14 | +## 🛠️ Tech Stack |
| 15 | + |
| 16 | +### Frontend |
| 17 | + |
| 18 | +- **SolidJS** - Reactive JavaScript framework |
| 19 | +- **Vite** - Fast build tool and dev server |
| 20 | +- **TailwindCSS** - Modern styling |
| 21 | +- **DaisyUI** - Flexable UI libriary |
| 22 | + |
| 23 | +### DevOps |
| 24 | + |
| 25 | +- **Docker** - Containerization |
| 26 | +- **Docker Compose** - Multi-container orchestration |
| 27 | + |
| 28 | +## 🚀 Quick Start |
| 29 | + |
| 30 | +### Prerequisites |
| 31 | + |
| 32 | +- Node.js 18+ |
| 33 | +- npm |
| 34 | +- Docker (optional) |
| 35 | + |
| 36 | +### Local Development |
| 37 | + |
| 38 | +1. **Clone the repository** |
| 39 | + |
| 40 | + ```bash |
| 41 | + git clone https://github.com/abdugaffor2004/ToDoApp-SolidJS.git |
| 42 | + cd ToDoApp-SolidJS |
| 43 | + ``` |
| 44 | + |
| 45 | +2. **Install dependencies** |
| 46 | + |
| 47 | + ```bash |
| 48 | + npm install |
| 49 | + ``` |
| 50 | + |
| 51 | +3. **Start development server** |
| 52 | + |
| 53 | + ```bash |
| 54 | + npm run dev |
| 55 | + ``` |
| 56 | + |
| 57 | +4. **Open your browser** |
| 58 | + Navigate to [http://localhost:5173](http://localhost:5173) |
| 59 | + |
| 60 | +### Docker Development |
| 61 | + |
| 62 | +1. **Start with Docker Compose** |
| 63 | + |
| 64 | + ```bash |
| 65 | + docker-compose up --build |
| 66 | + ``` |
| 67 | + |
| 68 | +2. **Access the application** |
| 69 | + - Frontend: [http://localhost:5173](http://localhost:5173) |
| 70 | + - Backend API: [http://localhost:3000](http://localhost:3000) |
| 71 | + |
| 72 | +## 📁 Project Structure |
| 73 | + |
| 74 | +``` |
| 75 | +ToDoApp-SolidJS/ |
| 76 | +├── src/ # Frontend source code |
| 77 | +│ ├── components/ # Reusable UI components |
| 78 | +│ ├── types/ # Application common types |
| 79 | +│ ├── styles/ # CSS/SCSS files |
| 80 | +│ └── utils/ # Utility functions |
| 81 | +├── server/ # Backend API |
| 82 | +│ ├── db.json # API routes |
| 83 | +│ └── Dockerfile # Docker server image definition |
| 84 | +├── scripts/ # Build and setup scripts |
| 85 | +├── docker-compose.yml # Docker services configuration |
| 86 | +├── Dockerfile # Docker client image definition |
| 87 | +└── package.json # Dependencies and scripts |
5 | 88 | ``` |
6 | 89 |
|
7 | | -### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs) |
| 90 | +## 📜 Available Scripts |
| 91 | + |
| 92 | +### Development |
| 93 | + |
| 94 | +- `npm run dev` - Start development server with hot reload |
| 95 | +- `npm run build` - Build for production |
| 96 | +- `npm run preview` - Preview production build locally |
| 97 | + |
| 98 | +### Docker |
| 99 | + |
| 100 | +- `docker-compose up` - Start all services |
| 101 | +- `docker-compose down` - Stop all services |
| 102 | +- `docker-compose build` - Rebuild containers |
| 103 | + |
| 104 | +## 🌐 API Endpoints |
| 105 | + |
| 106 | +The backend provides RESTful API endpoints for todo management: |
| 107 | + |
| 108 | +- `GET /api/todos` - Get all todos |
| 109 | +- `POST /api/todos` - Create new todo |
| 110 | +- `PUT /api/todos/:id` - Update existing todo |
| 111 | +- `DELETE /api/todos/:id` - Delete todo |
| 112 | + |
| 113 | +## 🔧 Configuration |
8 | 114 |
|
9 | | -## Available Scripts |
| 115 | +## 🚢 Deployment |
10 | 116 |
|
11 | | -In the project directory, you can run: |
| 117 | +### Production Build |
12 | 118 |
|
13 | | -### `npm run dev` |
| 119 | +1. **Build the application** |
14 | 120 |
|
15 | | -Runs the app in the development mode.<br> |
16 | | -Open [http://localhost:5173](http://localhost:5173) to view it in the browser. |
| 121 | + ```bash |
| 122 | + npm run build |
| 123 | + ``` |
17 | 124 |
|
18 | | -### `npm run build` |
| 125 | +2. **Deploy the `dist` folder** to your preferred hosting service |
19 | 126 |
|
20 | | -Builds the app for production to the `dist` folder.<br> |
21 | | -It correctly bundles Solid in production mode and optimizes the build for the best performance. |
| 127 | +### Docker Production |
22 | 128 |
|
23 | | -The build is minified and the filenames include the hashes.<br> |
24 | | -Your app is ready to be deployed! |
| 129 | +1. **Build production image** |
25 | 130 |
|
26 | | -## Deployment |
| 131 | + ```bash |
| 132 | + docker build -t todoapp-solidjs . |
| 133 | + ``` |
27 | 134 |
|
28 | | -Learn more about deploying your application with the [documentations](https://vite.dev/guide/static-deploy.html) |
| 135 | +2. **Run production container** |
| 136 | + ```bash |
| 137 | + docker run -p 80:80 todoapp-solidjs |
| 138 | + ``` |
0 commit comments