Skip to content

Commit a8d614a

Browse files
lazarusrolandolazarusrolando
authored
Create README.md
1 parent a88de00 commit a8d614a

File tree

1 file changed

+149
-0
lines changed

1 file changed

+149
-0
lines changed

‎README.md‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
# TechBlogger
2+
3+
TechBlogger is a modern, full-stack blogging platform designed for tech enthusiasts, writers, and administrators. It provides a seamless experience for both regular users and admins, featuring user authentication, post management, analytics, and a robust API key system for integrations.
4+
5+
## 🌟 Features
6+
7+
- **User Dashboard**: Personalized dashboard for users to manage their posts, view analytics, and update their profile.
8+
- **Admin Panel**: Powerful admin interface for managing users, admins, reports, and platform settings.
9+
- **API Key System**: Both users and admins can generate, view, and use API keys for secure API access.
10+
- **Authentication**: Secure login system with role-based access control (user/admin).
11+
- **Post Management**: Create, edit, and delete blog posts. Users see their own posts; admins can manage all users.
12+
- **Analytics**: Visual charts and stats for both users and admins.
13+
- **Profile Customization**: Upload avatars, update bio, and manage account settings.
14+
15+
## 🛠️ Tech Stack
16+
17+
- **Frontend**: React.js (with Chart.js for analytics)
18+
- **Backend**: Flask (Python) with RESTful API endpoints
19+
- **Database**: SQLite (default, can be swapped for MySQL/PostgreSQL)
20+
- **Styling**: Custom CSS
21+
22+
## 🚀 Getting Started
23+
24+
### Prerequisites
25+
- Node.js & npm
26+
- Python 3.x
27+
- (Optional) Virtualenv for Python
28+
29+
### 1. Clone the Repository
30+
```bash
31+
git clone <repo-url>
32+
cd react-example
33+
```
34+
35+
### 2. Install Frontend Dependencies
36+
```bash
37+
npm install
38+
```
39+
40+
### 3. Install Backend Dependencies
41+
```bash
42+
cd src/components
43+
pip install flask flask-cors
44+
```
45+
46+
### 4. Run the Backend
47+
```bash
48+
python app.py
49+
# or the relevant backend file
50+
```
51+
52+
### 5. Run the Frontend
53+
```bash
54+
cd ../..
55+
npm start
56+
```
57+
58+
The app will be available at [http://localhost:3000](http://localhost:3000).
59+
60+
## 🏗️ Code Structure
61+
62+
```
63+
react-example/
64+
├── public/ # Static assets (images, icons, etc.)
65+
├── src/
66+
│ ├── components/
67+
│ │ ├── Admin.js # Admin dashboard (user/admin management, reports, settings)
68+
│ │ ├── User.js # User dashboard (posts, analytics, settings)
69+
│ │ ├── ... # Other React components & backend scripts
70+
│ ├── App.js # Main React app
71+
│ └── index.js # React entry point
72+
├── package.json # Frontend dependencies
73+
└── ...
74+
```
75+
76+
## 🔑 API Key System
77+
78+
Both admins and users have access to a personal API key, which can be used to authenticate requests to protected API endpoints.
79+
80+
- **View API Key**: In the settings tab, users and admins can see their API key.
81+
- **Copy/Regenerate**: Buttons allow copying or regenerating the key. Regeneration updates the backend.
82+
- **Example Usage**: Code snippets are provided for Node.js (axios) and Python (requests) to show how to use the API key.
83+
84+
**Sample usage:**
85+
```js
86+
// Node.js (axios)
87+
const axios = require('axios');
88+
axios.get('http://localhost:5000/api/protected', {
89+
headers: { 'x-api-key': 'YOUR_API_KEY' }
90+
})
91+
.then(res => console.log(res.data));
92+
```
93+
```python
94+
# Python (requests)
95+
import requests
96+
response = requests.get(
97+
'http://localhost:5000/api/protected',
98+
headers={'x-api-key': 'YOUR_API_KEY'}
99+
)
100+
print(response.json())
101+
```
102+
103+
## 👤 User Experience
104+
- **Users**: Can manage their posts, view analytics, update their profile, and use their API key for integrations.
105+
- **Admins**: Have full control over users, admins, reports, and platform settings. Admins can also manage their own API key.
106+
107+
## 📂 Backend API Endpoints (Sample)
108+
- `/api/users` - Get all users
109+
- `/api/users/<username>/apikey` - Get or update a user's API key
110+
- `/api/admins` - Get all admins
111+
- `/api/admins/<admin_id>/apikey` - Get or update an admin's API key
112+
- `/api/posts/user/<username>` - Get posts for a user
113+
- `/auth/user-only` - Authenticate user
114+
- `/auth/admin` - Authenticate admin
115+
116+
## 📝 Customization
117+
- Update styles in `*.css` files for your branding.
118+
- Extend backend endpoints as needed for more features.
119+
- Swap SQLite for another database if desired.
120+
121+
## 🤝 Contributing
122+
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
123+
124+
## 📄 License
125+
MIT
126+
127+
## 🚢 Deployment
128+
129+
You can deploy the frontend and backend separately. For example:
130+
131+
### Deploying the Backend (Flask) to Heroku
132+
1. Add a `Procfile`:
133+
```
134+
web: python src/components/app.py
135+
```
136+
2. Commit your code and push to Heroku.
137+
138+
### Deploying the Frontend (React) to Vercel/Netlify
139+
1. Push your code to GitHub.
140+
2. Connect your repo to Vercel or Netlify and follow their deployment steps.
141+
142+
> Make sure to update API URLs to use your deployed backend!
143+
144+
## 🙏 Credits
145+
146+
- [React](https://reactjs.org/)
147+
- [Flask](https://flask.palletsprojects.com/)
148+
- [Chart.js](https://www.chartjs.org/)
149+
- [Random User API](https://randomuser.me/) (for demo avatars)

0 commit comments

Comments
 (0)