Meta Clock project using React, Spring and PostgreSQL

View on GitHub Pages: https://zabrafax.github.io/spring-react-meta-clock/
Note: The server may take a few minutes to start.

Meta Clock allows you to display time in an interesting and elegant way.

Inspired by ClockClock 24 , created with React, Spring, Java and PostgreSQL. Web-application have different options to try. Once you find your perfect settings, you can display it on fullscreen. Have features like:

• Ability to choose custom theme colors
• Time zone selection
• Different clock grid variations
• Ability to create an account
• All settings are saved on the server when you are logged in
• Account sensitive data is saved in hashed form
• Auto authorization using tokens

Deployment & Hosting

• Backend deployed on Render
• Frontend deployed automatically via GitHub Actions using Docker
• Database hosted on Supabase

Note:

Due to free hosting, the server may take a couple of minutes to start.

How to launch

View on GitHub Pages:

https://zabrafax.github.io/spring-react-meta-clock/
Note: The server may take a few minutes to start.

Manual launch:

1. Clone the repository:

   git clone git@github.com:Zabrafax/spring-react-meta-clock.git
   cd spring-react-meta-clock

2. Backend setup:

   cd backend

   • Rename .env.example to .env:

    mv .env.example .env

   • Edit .env and provide your database connection details:

   SPRING_DATASOURCE_URL=jdbc:postgresql://localhost:5432/meta_clock_db
   SPRING_DATASOURCE_USERNAME=postgres
   SPRING_DATASOURCE_PASSWORD=postgres

   • Create the database meta_clock_db in PostgreSQL:

   CREATE DATABASE meta_clock_db;

   • Run the backend (Spring Boot):

   ./mvnw spring-boot:run

3. Frontend setup:

    cd frontend

   • Rename .env.example to .env:

    mv .env.example .env

   • Install dependencies:

    npm install

   • Start the React app:

    npm start

Technologies Used

• 
• 
• 

Future Improvements

Adding different animations.

Created by @Zabrafax