XMeme

Meme Stream Page where users can post memes by providing their name, a caption for the meme and the URL for the meme image as input.

Technology Stack

Front End

• HTML
• CSS
• Vannila Javascript
• Bootstrap 5
• Material UI

Back End

• MySQL
• Java 8
• Spring Boot v2.4.2
• Hibernate
• Swagger
• Lombok
• Mockito
• JUnit 5

Prerequisites

• Java
• Maven
• VS Code or any Preffered IDE
• Eclipse or any other Java supported IDE
• MySQL Database

Running Backend

1. First clone the repository using the following command:

git clone https://github.com/harikesh409/xmeme.git

2. Change the current directory to the backend directory of the clone repo.

cd xmeme/backend/XMeme/

3. Run the backend server using maven. mvnw spring-boot:run
4. Running using docker-compose. docker-compose up -d
5. By default the application will run on port 8081.

Endpoints

1. Get all Memes - GET Method
   The pagenumber and pagesize parameters are optional.
   http://localhost:8081/memes?pageNumber=0&pageSize=100
   CURL example:

curl --location --request GET 'http://localhost:8081/memes'

2. Get Meme by ID - GET Method
   Pass the meme id in the url.
   http://localhost:8081/memes/id
   CURL example:

curl --location --request GET 'http://localhost:8081/memes/1'

3. Add Meme - POST Method
   Pass name, url, and caption on request body as json.
   http://localhost:8081/memes
   CURL example:

curl --location --request POST 'http://localhost:8081/memes' \
--header 'Content-Type: application/json' \
--data-raw '{
"name": "xyz",
"url": "https://ichef.bbci.co.uk/images/ic/704xn/p072ms6r.jpg",
"caption": "This is a meme"
}'

4. Update a Meme by ID - PATCH Method
   Pass meme id in the url and caption, url in request body as json.
   http://localhost:8081/memes/id
   CURL example:

curl --location --request PATCH 'http://localhost:8081/memes/1' \
--header 'Content-Type: application/json' \
--data-raw '{
	"caption":"updated caption",
	"url":"https://images.pexels.com/photos/3573382/pexels-photo-3573382.jpeg"
}'

5. Delete a Meme by ID - DELETE Method
   Pass meme id in the url.
   http://localhost:8081/memes/id
   CURL example:

curl --location --request DELETE 'http://localhost:8081/memes/1'

6. Swagger UI
   http://localhost:8081/swagger-ui/

Running FrontEnd

1. Goto \xmeme\frontend and open index.html.
2. To change the backend URL update the host variable in script.js file located at \xmeme\frontend\js.

// Change this value to update the backend URL
const host = "http://localhost:8081";

Screenshots

Home Page

Create Modal

Update Modal

Swagger UI