Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mhmdfais/sudo-write-thoughts
Blogging platform
https://github.com/mhmdfais/sudo-write-thoughts
express jwt-auth jwt-token react rest-api
Last synced: 20 days ago
JSON representation
Blogging platform
- Host: GitHub
- URL: https://github.com/mhmdfais/sudo-write-thoughts
- Owner: MhmdFais
- Created: 2024-10-10T17:16:53.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-10-21T18:40:33.000Z (24 days ago)
- Last Synced: 2024-10-22T20:48:21.067Z (23 days ago)
- Topics: express, jwt-auth, jwt-token, react, rest-api
- Language: JavaScript
- Homepage: https://sudo-write-thoughts.vercel.app/
- Size: 486 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sudo Write { Thoughts } - Blogging Platform
Sudo Write { Thoughts } is a blogging platform where users can read articles, comment on posts, and interact with others. Registered users can create, update, and comment on posts, while unregistered users can view content and comments but cannot participate until logged in.
The platform includes a React frontend and an Express backend with the following functionalities:
- Frontend: Displays articles, allows user registration, and enables users to post comments.
- Backend: Handles authentication, article management (CRUD), and comment posting.
# Live Preview
Click [Here](https://sudo-write-thoughts.vercel.app/)
# Screenshots
# Key Features
- User Authentication: Only logged-in users can comment or post articles.
- Role-Based Access: Admin users can manage (create, update, delete) posts.
- Commenting System: Users can post comments, and admins can delete inappropriate comments.
- TinyMCE Editor: Articles are created and displayed using TinyMCE in read-only mode.
- Protected Routes: Users must log in to access certain features, like posting comments.
# Frontend Installation
1. Clone the repository
```
git clone https://github.com/MhmdFais/sudo-write-thoughts
cd client
```
2. Install dependencies
```
npm install
```
3. Set up environment variables
# Backend Installation
1. Navigate to the backend folder
```
cd ../server
```
2. Install backend dependencies
```
npm install
```
3. Set up environment variables
4. Make sure you have a PostgreSQL database running
5. Run database migrations to set up the database schema
```
npx prisma migrate deploy
```
# Environment Variables
Frontend .env
```
VITE_REACT_APP_API_URL= # Example: http://localhost:4000
VITE_MCE_API_KEY= # Get from https://www.tiny.cloud/
```
Backend .env
```
PORT=4000
DATABASE_URL= # Example: postgresql://user:pass@localhost:5432/db_name
JWT_SECRET= # Secret key for JWT signing
```
# How to Run
## Backend
1. Navigate to the backend folder
```
cd server
```
2. Start the backend server
```
npm run dev
```
## Frontend
1. Navigate to the frontend folder
```
cd client
```
2. Start the frontend development server
```
npm run dev
```
# Technologies
## Frontend:
- React: Library for building the UI.
- React Router: Client-side routing.
- Axios: To make HTTP requests to the backend.
- TinyMCE: WYSIWYG editor for creating and displaying post content.
- Vite: Fast development server and build tool.
## Backend:
- Node.js: Backend runtime environment.
- Express.js: Web framework for building the backend.
- PostgreSQL: Database for storing user and blog data.
- Prisma: ORM for database queries.
- JWT: For user authentication.
- bcrypt: For password hashing.
# API Endpoints
## Auth Routes
- POST /auth/register: Register a new user.
- POST /auth/login: Log in and get a JWT.
- POST /auth/logout: Log out the user by invalidating the refresh token.
## Post Routes
- GET /posts: Get all blog posts.
- GET /posts/:id: Get details of a single post.
- POST /admin/posts: Create a new post (Admin only).
- PATCH /admin/posts/:id: Edit an existing post (Admin only).
- DELETE /admin/posts/:id: Delete a post (Admin only).
## Comment Routes
- POST /posts/:id/comment: Add a comment to a post (Logged-in users only).
- DELETE /admin/posts/:id/comment/:commentId: Delete a comment (Admin only).
# Contributions
Feel free to fork this project, open issues, or submit pull requests to improve the platform!