Medium Clone Full Stack Project

Medium Clone project is a full stack web application project and it was created with Java Spring Boot and Next.js. Also, frontend design of project was designed with Tailwind CSS.

Brief Description of the Project

In our application, users will be able to share their own writings and comment on other users' writings. They can also follow other users and receive notifications when they are followed. Additionally, there will be a special section for popular posts and authors in our app. Users can follow their favorite authors and easily find their writings. Our app will also have a search feature, allowing users to easily find posts on specific topics. Along with all these features, users will have profiles where they can share information about themselves.

Technologies

Backend

• Java 17
• Spring Boot 3
• Spring Security
• Spring Data JPA
• MySql
• Redis
• Docker
• Jwt
• Cloudinary
• AOP
• Modelmapper
• Apache commons-lang3
• Swagger

Frontend

• JavaScript
• React
• Next.js
• Next Auth
• Tailwind CSS
• Swr
• TypeScript
• next-mdx
• Ant Desing
• Material UI

Usage Of Technologies

On the Backend Side,

Java Spring Boot was used to generate a REST API. MySQL was used as a relational database. In this project, we implemented an N-Layered architecture. In the data access layer, Spring Data JPA was used to access data from the database. Authorization and authentication processes were provided by Spring Security and JWT (JSON Web Tokens). When a user logs in, an access token and refresh token are generated. We used Redis for one purpose in this project: storing the refresh token. We store the refresh token in Redis when a user logs in. If the access token expires, we use the refresh token stored in Redis to refresh the access token. The Redis configuration can be found in the config package. Additionally, AOP (Aspect-Oriented Programming) was used. A logging aspect was created for the logging process and saving purposes. To upload images to the cloud, the Cloudinary API was utilized. Cloudinary configuration can be found in the config package. Docker was used to run Redis and MySQL images. For this purpose, a Docker Compose file was generated.

On the Frontend Side,

//ToDo:

How can I use this project?

1. Clone or Download zip folder of this repository

git clone https://github.com/SDU-Bilgisayar-Muhendisligi/cleanreading.git

3. Run docker compose file for redis and mysql images. Open cmd in project root folder and type:

docker compose up -d

4. Start your backend project with your favourite IDE.

5. In frontend directory, open cmd and type:

npm install

6. Start frontend project.

npm run dev