Full-Stack-Blog-Website/detail-working.txt at main · Haseeb-WebDeveloper/Full-Stack-Blog-Website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
# Blog Application - Detailed Technical Documentation

## 1. Project Architecture

### Directory Structure:
- /src/app: Main application routes and pages
- /src/components: Reusable UI components
- /src/models: Database models
- /src/lib: Utility functions
- /src/contexts: React contexts for state management
- /src/utils: Validation and helper functions

## 2. Database Setup (MongoDB)

### Connection:
- MongoDB connection is handled in `/src/lib/db.ts`
- Uses mongoose for MongoDB interactions
- Connection string stored in `.env` as MONGO_URI

### Models:
1. Admin Model (`/src/models/admin.model.ts`):
   - Schema fields: name, email, password
   - Password hashing using bcrypt
   - Custom methods for password comparison
   - Timestamps for created/updated tracking

## 3. Authentication Flow

### A. Signup Process:
1. User visits `/admin` page
2. Fills signup form with:
   - Full Name
   - Email
   - Password

3. Client-side validation:
   - Name: minimum 2 characters
   - Email: valid email format
   - Password: minimum 6 characters

4. Form submission:
   - Frontend sends POST request to `/api/admin/signup`
   - Request includes: { name, email, password }

5. Backend processing:   ```typescript
   // /api/admin/signup/route.ts workflow:
   a. Validate input data
   b. Check if email already exists
   c. Create new admin in database
   d. Password automatically hashed via mongoose middleware
   e. Return success response   ```

### B. Login Process:
1. User visits `/admin/login`
2. Enters credentials:
   - Email
   - Password

3. Form submission:
   - Frontend sends POST to `/api/admin/login`
   - Request includes: { email, password }

4. Backend processing:   ```typescript
   // /api/admin/login/route.ts workflow:
   a. Find admin by email
   b. Compare password using bcrypt
   c. If successful:
      - Create HTTP-only cookie with adminId
      - Return admin data (excluding password)
   d. If failed:
      - Return error message   ```

### C. Authentication State Management:
1. Auth Context (`/src/contexts/auth-context.tsx`):
   - Provides global auth state
   - Stores admin information
   - Handles auth state changes

2. Auth Check Flow:   ```typescript
   // On app load:
   a. Check for adminId cookie
   b. If cookie exists:
      - Fetch admin data from /api/admin/check-auth
      - Update auth context
   c. If no cookie/invalid:
      - Clear auth context   ```

## 4. Frontend Components

### A. Navbar (`/src/components/sections/navbar.tsx`):
- Dynamic rendering based on auth state
- Shows different buttons for logged-in/out users
- Handles logout functionality

### B. Auth Pages:
1. Signup Page (`/src/app/admin/page.tsx`):
   - Form validation
   - Error handling
   - Success redirection

2. Login Page (`/src/app/admin/login/page.tsx`):
   - Credential validation
   - Auth state update
   - Loading states

## 5. API Routes

### A. Admin Routes:
1. `/api/admin/signup`:
   - Creates new admin
   - Handles validation
   - Error handling

2. `/api/admin/login`:
   - Authenticates admin
   - Sets cookies
   - Returns admin data

3. `/api/admin/check-auth`:
   - Verifies authentication
   - Returns current admin data

4. `/api/admin/logout`:
   - Clears authentication cookie
   - Resets auth state

## 6. Security Features

### A. Password Security:
- Passwords hashed using bcrypt
- Salt rounds: 10 (configurable)
- Never stored in plain text

### B. Cookie Security:
- HTTP-only cookies
- Secure in production
- SameSite policy: lax
- 7-day expiration

### C. Input Validation:
- Client-side validation
- Server-side validation
- XSS prevention
- Input sanitization

## 7. Error Handling

### A. Frontend:
- Form validation errors
- API error displays
- Loading states
- User feedback

### B. Backend:
- Try-catch blocks
- Proper error responses
- Status codes
- Error logging

## 8. Workflow Example

### Complete Signup -> Login Flow:
1. User visits `/admin`
2. Fills signup form
3. Frontend validates input
4. Backend creates account
5. Redirects to login
6. User enters credentials
7. Backend authenticates
8. Sets auth cookie
9. Updates auth context
10. Redirects to home
11. Navbar updates to show admin options

## 9. Development Notes

### A. Environment Setup: