Full Stack Reddit Clone - Spring Boot, React, Electron App - Part 1
Tags: react, java, typescript, webdev
Published: 2020-07-25 21:53:45

# Full Stack Reddit Clone - Spring Boot, React, Electron App - Part 1

## Introduction

In this series of blog posts, we will be building a Reddit clone with Spring Boot, React, and Electron. We will be using varying Spring Technologies like Spring Data JPA, Spring Security with JWT, and PostgreSQL for the database with Redis for Caching. The frontend portion will be using React with Typescript, Redux for state management, and Material-UI.

## Important Links

- Backend Source: https://github.com/MaxiCB/vox-nobis/tree/master/backend
- Frontend Source: https://github.com/MaxiCB/vox-nobis/tree/master/client
- Trello Board: https://trello.com/b/Aw4GcVFv
- Live URL: In Progress

## Part 1: Backend Project Initialization 👩‍💻

Let's get started building the backend of this application, the first thing we will do is initialize the project using the [Spring Initializer Website](https://start.spring.io/)

- Configure the project as follows

  - Project: Maven Project
  - Language: Java
  - Spring Boot: 2.3.2
  - Project Metadata:
    - Group: com.your-name-here
    - Artifact: backend
    - Packaging: JAR
    - Java: 11
  - Dependencies:
    - Lombok
    - Spring Web
    - Spring Security
    - Spring Data JPA
    - Java Mail Sender
    - Thymeleaf
    - PostgreSQL Driver
    - Spring Data Redis (Access+Driver)

- Click generate project, download the project, and extract the contents somewhere safe.

- Open the project in your favorite IDE, and ensure the project structure looks similar to below:

    ![alt text](https://imgur.com/NvOcnmN.png "Project Structure")

## Part 2: Additional Dependencies 📚

Now we need to add a couple additional dependencies that were not available in the project initializer

- Open the pom.xml file and add the following dependencies for JWT Authentication, TimeAgo, Validator, and JavaFaker for future testing.

    ``` 
    <!-- JavaFaker related dependencies-->
	<dependency>
		<groupId>com.github.javafaker</groupId>
		<artifactId>javafaker</artifactId>
		<version>0.12</version>
	</dependency>
    <!-- JWT related dependencies-->
	<dependency>
		<groupId>io.jsonwebtoken</groupId>
		<artifactId>jjwt-api</artifactId>
		<version>0.11.2</version>
	</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-validation</artifactId>
</dependency>
	<dependency>
		<groupId>io.jsonwebtoken</groupId>
		<artifactId>jjwt-impl</artifactId>
		<scope>runtime</scope>
		<version>0.11.2</version>
	</dependency>
	<dependency>
		<groupId>io.jsonwebtoken</groupId>
		<artifactId>jjwt-jackson</artifactId>
		<scope>runtime</scope>
		<version>0.11.2</version>
	</dependency>
	<!-- TimeAgo related dependencies-->
	<dependency>
		<groupId>com.github.marlonlom</groupId>
		<artifactId>timeago</artifactId>
		<version>4.0.1</version>
	</dependency>
	<dependency>
		<groupId>org.jetbrains.kotlin</groupId>
		<artifactId>kotlin-stdlib-jdk8</artifactId>
		<version>${kotlin.version}</version>
	</dependency>
	<dependency>
		<groupId>org.jetbrains.kotlin</groupId>
		<artifactId>kotlin-test</artifactId>
		<version>${kotlin.version}</version>
		<scope>test</scope>
	</dependency>
    ```

## Part 3: Database, Hibernate, and Java Mail Configuration ⚙

Now we need to configure PostgreSQL, Hibernate JPA, Java Mail, and Redis

- I am assuming you already have PostgreSQL, and Redis installed and setup.
- [PostgreSQL Installation](https://www.postgresql.org/download/)
- [Redis Installation](https://redis.io/download)
- You will also need to create an account at [Mailtrap](https://mailtrap.io/), to send account verification and notification emails. The reason this is needed is to have access to a fake SMTP Server through MailTrap. You can access the connections details by logging in, and selecting the cog icon on the demo inbox.
- Open the **src/main/resources/application.properties** file and add the following

    ```
    # Database Properties
    spring.datasource.driver-class-name=org.postgresql.Driver
    spring.datasource.url=jdbc:postgresql://localhost:5432/postgres
    spring.datasource.username=<your-db-username>
    spring.datasource.password=<your-db-password>
    spring.datasource.initialization-mode=always
    spring.jpa.hibernate.ddl-auto=create-drop
    spring.jpa.show-sql=true
    spring.jpa.generate-ddl=true
    # Redis Properties
    spring.cache.type=redis
    spring.redis.host=localhost
    spring.redis.port=6379
    # Mail Properties
    spring.mail.host=smtp.mailtrap.io
    spring.mail.port=25
    spring.mail.username=<your-smtp-username>
    spring.mail.password=<your-smtp-password>
    spring.mail.protocol=smtp
    ```

## Conclusion 🔍

- To ensure everything is configured correctly you can run the application, and ensure there are no error in the console. Towards the bottom of the console you should see output similar to below

    ![alt text](https://imgur.com/ujCpRgd.png "Successful Run")

- In this article we covered the initialization of our Spring Boot backend.  
- Added JWT, TimeAgo, and JavaFaker dependencies for user authentication, displaying dates as relative time ago language, and generating fake data for future testing.
- Added all the needed configuration for our backend to connect to our database, redis, and mail trap.

## Next 📺

## [Part 2 ](https://dev.to/maxicb/full-stack-reddit-clone-spring-boot-react-electron-app-part-2-446l) Creating all of the domain entities, and repositories needed within the backend.