Medium Clone

Description

Medium Clone is a full-stack web application that replicates the core functionality of Medium. It allows users to share their own writings, comment on other users' posts, and follow their favorite authors. The application includes features like trending posts, topic-based filtering, and a personalized feed based on user subscriptions. It leverages a modern tech stack to provide a robust backend API and a responsive, dynamic frontend.

Tech Stack

• Backend: Java 17, Spring Boot 3, Spring Security, Spring Data JPA
• Database: MySQL, Redis (for token caching)
• Frontend: Next.js, React, Tailwind CSS, Next Auth, SWR, TypeScript, Ant Design, Material UI
• Infrastructure: Docker, Docker Compose
• Other: JWT, Cloudinary, AOP, ModelMapper, Swagger

Setup Instructions

Prerequisites

• JDK 17
• Node.js (v16+)
• Docker & Docker Compose
• MySQL (if running locally without Docker)

Running the Application

1. Clone the repository:

git clone https://github.com/SarvarMusa/Medium-Clone.git
cd Medium-Clone

2. Start Infrastructure (MySQL & Redis):

docker-compose up -d

3. Start Backend: Navigate to the backend directory and run the Spring Boot application using your IDE or Maven:

cd backend
mvn spring-boot:run

4. Start Frontend: Navigate to the frontend directory, install dependencies, and start the development server:

cd ../frontend
npm install
npm run dev

Environment Variables

Never commit the .env file! Create a .env file in the backend directory with the following variables:

MYSQLDB_USER=root
MYSQLDB_ROOT_PASSWORD=your_password
MYSQLDB_DATABASE=cleanreading
MYSQLDB_LOCAL_PORT=3307
MYSQLDB_DOCKER_PORT=3306
REDIS_LOCAL_PORT=6379
REDIS_DOCKER_PORT=6379
SPRING_LOCAL_PORT=8080
SPRING_DOCKER_PORT=8081
CLOUDINARY_URL=your_cloudinary_url
JWT_SECRET=your_jwt_secret

Usage Examples

• Register a user: Navigate to /register and fill out the form.
• Create a post: Once logged in, click "Write" to access the editor. You can use markdown and upload images.
• Follow authors: Visit an author's profile and click "Follow" to see their posts in your feed.

API Endpoints

Endpoint	Method	Description
/api/auth/register	POST	Register a new user
/api/auth/login	POST	Authenticate and get JWT
/api/posts	GET	Get paginated list of posts
/api/posts/{id}	GET	Get a specific post
/api/posts	POST	Create a new post
/api/users/{id}/follow	POST	Follow a user

Screenshots

(Add your screenshots here)

• Homepage Feed
• Post Creation Editor
• User Profile Page