Skip to content

Commit b81d46e

Browse files
paulanunes85paulanunes85
committed
Update Exercise 1 README with detailed objectives, structure, and troubleshooting; fix newline in solution Bicep file
1 parent 7796644 commit b81d46e

File tree

7 files changed

+1598
-141
lines changed

7 files changed

+1598
-141
lines changed

‎modules/module-07/exercises/exercise1-todo-app/README.md‎

Lines changed: 252 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,273 @@
1-
# exercise1-todo-app
1+
# Exercise 1: Full-Stack Todo Application
22

33
## 📋 Overview
44

5-
This exercise focuses on [DESCRIPTION].
5+
Build a complete full-stack Todo application using modern web technologies. This exercise teaches you how to create a production-ready application with React frontend, Node.js backend, database integration, and proper DevOps practices.
66

77
## 🎯 Learning Objectives
88

9-
- Objective 1
10-
- Objective 2
11-
- Objective 3
9+
By completing this exercise, you will:
10+
11+
- ✅ Build a React frontend with TypeScript
12+
- ✅ Create a RESTful API with Express.js
13+
- ✅ Implement database operations (MongoDB/PostgreSQL)
14+
- ✅ Add authentication and authorization
15+
- ✅ Write comprehensive tests (unit & integration)
16+
- ✅ Containerize the application with Docker
17+
- ✅ Set up CI/CD pipelines
18+
- ✅ Deploy to cloud platforms
1219

1320
## 📁 Structure
1421

1522
```
1623
exercise1-todo-app/
17-
├── instructions/
18-
│ ├── part1.md
19-
│ └── part2.md
20-
├── starter/
21-
│ └── ...
22-
├── solution/
23-
│ └── ...
24-
└── tests/
25-
└── ...
24+
├── README.md # This file
25+
├── instructions/ # Step-by-step guides
26+
│ ├── part1.md # Backend development
27+
│ ├── part2.md # Frontend development
28+
│ └── part3.md # Deployment & DevOps
29+
├── setup.sh # Environment setup script
30+
├── starter/ # Starting templates
31+
│ ├── backend/ # Backend starter code
32+
│ │ ├── src/ # Source files
33+
│ │ ├── tests/ # Test files
34+
│ │ ├── package.json # Dependencies
35+
│ │ └── Dockerfile # Container config
36+
│ └── frontend/ # Frontend starter code
37+
│ ├── src/ # React components
38+
│ ├── public/ # Static assets
39+
│ ├── package.json # Dependencies
40+
│ └── Dockerfile # Container config
41+
├── solution/ # Complete implementation
42+
│ ├── backend/ # Full backend solution
43+
│ │ ├── src/
44+
│ │ │ ├── models/ # Data models
45+
│ │ │ ├── routes/ # API routes
46+
│ │ │ ├── middleware/ # Custom middleware
47+
│ │ │ ├── services/ # Business logic
48+
│ │ │ └── app.js # Express app
49+
│ │ ├── tests/ # All tests
50+
│ │ └── docker-compose.yml
51+
│ └── frontend/ # Full frontend solution
52+
│ ├── src/
53+
│ │ ├── components/ # React components
54+
│ │ ├── hooks/ # Custom hooks
55+
│ │ ├── services/ # API services
56+
│ │ ├── store/ # State management
57+
│ │ └── App.tsx # Main component
58+
│ └── tests/ # Frontend tests
59+
└── tests/ # E2E tests
60+
├── cypress/ # Cypress tests
61+
└── postman/ # API tests
2662
```
2763

2864
## 🚀 Getting Started
2965

30-
1. Review the [prerequisites](../../prerequisites.md)
31-
2. Set up your environment using [setup instructions](../../README.md#setup)
32-
3. Start with [Part 1](instructions/part1.md)
66+
### Prerequisites
67+
68+
1. **Node.js**: Version 18.x or later
69+
```bash
70+
node --version
71+
```
72+
73+
2. **Docker**: For containerization
74+
```bash
75+
docker --version
76+
```
77+
78+
3. **Git**: For version control
79+
80+
4. **Database**: MongoDB or PostgreSQL
81+
- MongoDB: `mongod --version`
82+
- PostgreSQL: `psql --version`
83+
84+
5. **Code Editor**: VS Code recommended
85+
86+
### Quick Start
87+
88+
1. **Clone and setup**:
89+
```bash
90+
cd exercise1-todo-app
91+
./setup.sh
92+
```
93+
94+
2. **Start the backend**:
95+
```bash
96+
cd starter/backend
97+
npm install
98+
npm run dev
99+
```
100+
101+
3. **Start the frontend**:
102+
```bash
103+
cd starter/frontend
104+
npm install
105+
npm start
106+
```
107+
108+
4. **Access the application**:
109+
- Frontend: http://localhost:3000
110+
- Backend API: http://localhost:5000
111+
- API Docs: http://localhost:5000/api-docs
112+
113+
## 📚 Exercise Parts
114+
115+
### Part 1: Backend Development (45 mins)
116+
- Set up Express.js server
117+
- Create Todo CRUD endpoints
118+
- Implement database models
119+
- Add input validation
120+
- Write API tests
121+
122+
### Part 2: Frontend Development (60 mins)
123+
- Create React components
124+
- Implement state management
125+
- Connect to backend API
126+
- Add user authentication
127+
- Style with CSS/Tailwind
128+
129+
### Part 3: Deployment & DevOps (45 mins)
130+
- Containerize applications
131+
- Set up GitHub Actions
132+
- Deploy to cloud (Azure/AWS)
133+
- Configure monitoring
134+
- Implement logging
135+
136+
## 🎨 Features to Implement
137+
138+
### Core Features
139+
- ✅ Create new todos
140+
- ✅ List all todos
141+
- ✅ Update todo status
142+
- ✅ Delete todos
143+
- ✅ Filter todos (all/active/completed)
144+
- ✅ Mark all as complete
145+
146+
### Advanced Features
147+
- 🎯 User authentication
148+
- 🎯 Todo categories/tags
149+
- 🎯 Due dates & reminders
150+
- 🎯 Search functionality
151+
- 🎯 Drag & drop reordering
152+
- 🎯 Dark mode toggle
153+
154+
## 🏗️ Architecture
155+
156+
### Backend Stack
157+
- **Framework**: Express.js
158+
- **Language**: JavaScript/TypeScript
159+
- **Database**: MongoDB with Mongoose / PostgreSQL with Prisma
160+
- **Authentication**: JWT tokens
161+
- **Validation**: Joi/Express-validator
162+
- **Testing**: Jest & Supertest
163+
164+
### Frontend Stack
165+
- **Framework**: React 18
166+
- **Language**: TypeScript
167+
- **State**: Context API / Redux Toolkit
168+
- **Styling**: Tailwind CSS / Material-UI
169+
- **HTTP Client**: Axios
170+
- **Testing**: React Testing Library
171+
172+
### DevOps Stack
173+
- **Containers**: Docker & Docker Compose
174+
- **CI/CD**: GitHub Actions
175+
- **Cloud**: Azure App Service / AWS ECS
176+
- **Monitoring**: Application Insights
177+
- **Logging**: Winston / Morgan
33178

34179
## 📊 Success Criteria
35180

36-
- [ ] All tests pass
37-
- [ ] Code follows best practices
38-
- [ ] Solution is properly documented
181+
### Functionality
182+
- [ ] ✅ All CRUD operations work correctly
183+
- [ ] ✅ Data persists in database
184+
- [ ] ✅ Frontend updates in real-time
185+
- [ ] ✅ Authentication protects routes
186+
- [ ] ✅ Error handling is robust
187+
188+
### Code Quality
189+
- [ ] ✅ Code follows style guide
190+
- [ ] ✅ TypeScript types are proper
191+
- [ ] ✅ No console errors/warnings
192+
- [ ] ✅ Tests have >80% coverage
193+
- [ ] ✅ Docker builds successfully
194+
195+
### Deployment
196+
- [ ] ✅ CI/CD pipeline passes
197+
- [ ] ✅ Application deploys cleanly
198+
- [ ] ✅ Health checks pass
199+
- [ ] ✅ Monitoring is active
200+
- [ ] ✅ Logs are accessible
201+
202+
## 🛠️ Troubleshooting
203+
204+
### Common Issues
205+
206+
1. **Port already in use**:
207+
```bash
208+
# Find process using port
209+
lsof -i :3000
210+
# Kill process
211+
kill -9 <PID>
212+
```
213+
214+
2. **Database connection fails**:
215+
- Check if database is running
216+
- Verify connection string
217+
- Check firewall settings
218+
219+
3. **CORS errors**:
220+
- Ensure backend allows frontend origin
221+
- Check API endpoint URLs
222+
223+
### Debug Commands
224+
225+
```bash
226+
# Backend logs
227+
npm run dev:debug
228+
229+
# Frontend debug
230+
npm start -- --inspect
231+
232+
# Database queries
233+
npm run db:debug
234+
235+
# Test specific file
236+
npm test -- --watch todo.test.js
237+
```
238+
239+
## 🏆 Bonus Challenges
240+
241+
1. **Real-time Updates**: Add WebSocket support
242+
2. **Offline Support**: Implement PWA features
243+
3. **Multi-tenant**: Support multiple users
244+
4. **API Rate Limiting**: Prevent abuse
245+
5. **Internationalization**: Multi-language support
246+
247+
## 📖 Resources
248+
249+
- 📚 [React Documentation](https://react.dev/)
250+
- 🚀 [Express.js Guide](https://expressjs.com/)
251+
- 🗄️ [MongoDB University](https://university.mongodb.com/)
252+
- 🐳 [Docker Documentation](https://docs.docker.com/)
253+
- 🔧 [Jest Testing](https://jestjs.io/)
254+
- 📊 [GitHub Actions](https://docs.github.com/actions)
39255

40256
## 🤝 Need Help?
41257

42-
- Check the [Troubleshooting Guide](../../troubleshooting.md)
43-
- Review the [Module Resources](../../README.md#resources)
44-
- Look at the [Solution Code](solution/) after attempting
258+
1. Check the solution code for reference
259+
2. Review error messages carefully
260+
3. Use browser DevTools for debugging
261+
4. Check the [Module 7 Troubleshooting Guide](../../troubleshooting.md)
262+
263+
## ⏭️ Next Steps
264+
265+
After completing this exercise:
266+
1. Add more advanced features
267+
2. Improve performance (caching, pagination)
268+
3. Move to [Exercise 2: Blog Platform](../exercise2-blog-platform/)
269+
4. Deploy to production with a custom domain
270+
271+
---
272+
273+
**Remember**: Building full-stack applications requires patience and practice. Focus on one feature at a time and test as you go! 🚀

0 commit comments

Comments
 (0)