This project started from CIS 3296: Software Design at TUJ.
Project Members:
- Kaito Tsutsui (Role: Web Development)
- Kseniya Chadovich (Role: Custom LLM)
- Sumana Reddy (Role: Custom LLM)
In today's society, many people use social media daily, often leading to negative interactions such as insults directed at users or celebrities. These hostile exchanges can result in depression, mental health issues, or even suicide. To combat this, I created Utopia, a social media application designed to foster mutual support and positivity.
-
Frontend:
- TypeScript
- React
- Next.js
- Tailwind CSS
- Zustand
- shadcn/ui
-
Backend:
- Golang
- Echo
- Air
- Gorm
- Gorilla WebSocket
- MySQL
- Groq for LLM API (model: Llama 3 Groq 70B)
-
Infrastructure
- Docker
- Docker Compose
- shadcn/ui: https://ui.shadcn.com/
- Groq: https://groq.com/
This landing page is for those who are new to Utopia. You can see brief explanation about Utopia.
You can post and reply like other social media. You can react to every post and reply.
Utopia detects not only f-words but also offensive, sexual, and any inappropriate content. We ensure to provide the most peaceful place on the Internet.
You can search posts and users.
When users do some actions such as follow, react, reply, or send a message, it sends a notification and displays a notification badge until you check the notifications.
You can send messages directly to other users realtime.
Of course, Utopia detects inappropriate content in DMs.
You can see your own profile and update your information here.
Also, you can visit other user's profile. You can follow or unfollow users here.
Again, you are not allowed to add any inappropriate content in Utopia.
Settings feature is coming soon...
Utopia provides you responsive design for multiple devices such as tablets and smartphones.
.
├── frontend
├── backend
├── .env.example
├── .gitignore
├── compose.yaml
└── README.md
Under /app directory, all the directories are routes. However, it ignores directories with parenthesis. For example, if you visit /frontend/app/login/page.tsx, the route would be https://example.com/login or http://localhost:3000/login in development.
Next.js (app router) uses a file-system based router where folders are used to define routes. Each folder represents a route segment that maps to a URL segment. To create a nested route, you can nest folders inside each other.
Source: https://nextjs.org/docs/app/building-your-application/routing/defining-routes
└── frontend
├── app
│ ├── (auth)
│ │ ├── login
│ │ │ └── page.tsx
│ │ └── sign-up
│ │ └── page.tsx
│ ├── (authenticated)
│ │ ├── home
│ │ │ ├── page.tsx
│ │ │ └── posts
│ │ │ └── [postId]
│ │ │ ├── [replyId]
│ │ │ │ └── page.tsx
│ │ │ └── page.tsx
│ │ ├── layout.tsx
│ │ ├── messages
│ │ │ ├── [userId]
│ │ │ │ └── page.tsx
│ │ │ ├── _components
│ │ │ └── page.tsx
│ │ ├── notifications
│ │ │ ├── _components
│ │ │ └── page.tsx
│ │ ├── profile
│ │ │ ├── [userId]
│ │ │ │ └── page.tsx
│ │ │ ├── edit
│ │ │ │ └── page.tsx
│ │ │ └── page.tsx
│ │ ├── search
│ │ │ ├── _components
│ │ │ └── page.tsx
│ │ └── settings
│ │ └── page.tsx
│ ├── fonts
│ ├── globals.css
│ ├── layout.tsx
│ ├── loading.tsx
│ └── page.tsx
├── components
│ ├── MobileHeader.tsx
│ ├── MobileNavbar.tsx
│ ├── MobilePostButton.tsx
│ ├── PostItem.tsx
│ ├── ReplyItem.tsx
│ ├── lp
│ ├── right-sidebar
│ ├── sidebar
│ └── ui // shadcn/ui
├── components.json
├── hooks
│ ├── useAuth.ts
│ └── useEmojis.ts
├── lib
│ ├── types.ts
│ ├── utils.ts
│ └── validations.ts
├── public
│ └── images
├── stores // zustand
│ ├── authStore.ts
│ └── notificationStore.ts
└── Dockerfile
route.go is the place where all APIs are defined.
└── backend
├── db
│ └── db.go
├── handlers // All the handler functions
│ ├── auth.go
│ ├── emoji.go
│ ├── follower.go
│ ├── groq.go
│ ├── message.go
│ ├── notification.go
│ ├── post.go
│ ├── reaction.go
│ ├── reply.go
│ ├── user.go
│ └── websocket.go
├── migrations // All SQL migration files
├── models // All the defined structures
│ ├── auth.go
│ ├── emoji.go
│ ├── follower.go
│ ├── groq.go
│ ├── message.go
│ ├── notification.go
│ ├── post.go
│ ├── reaction.go
│ ├── reply.go
│ └── user.go
├── .air.toml
├── .gitignore
├── dbconfig.yml
├── Dockerfile
├── go.mod
├── go.sum
├── main.go
└── route.go
To run this program, you need to have Docker and Docker Compose installed on your machine.
- Docker
- Docker Compose
If you already have them on your machine, you can skip the section below.
Go to https://docs.docker.com/desktop/install/mac-install/ and install Docker Desktop.
Go to https://docs.docker.com/desktop/install/windows-install/ and install Docker Desktop.
If you face an error saying "WSL 2 installation is incomplete", then you have to install the kernel update and restart your machine.
If you are on Ubuntu, go to https://docs.docker.com/desktop/install/linux/ubuntu/ and install Docker Desktop.
There are some instructions for other Linux distributions, so please follow the instructions on the website to install Docker and Docker Compose.
Run the following command to check the versions of Docker and Docker Compose.
docker --version
docker compose version
git clone https://github.com/ktsu2i/utopia.git
cd utopia
Copy .env.example and add secret keys.
cp .env.example .env
Warning
If you are NOT using Apple Silicon, comment out this line.
db:
image: mysql:8.0
# platform: linux/amd64Depending on version of Docker Compose, you might want to use docker-compose instead of docker compose.
docker compose up --build
Once you build the app, you can run the app without --build option unless you don't change Dockerfile or compose.yaml.
docker compose up
Once the container is up, you can go to http://localhost:3000 and either sign up or login with your account.
You may want to run some commands for MySQL CLI. Run this following command to go inside the MySQL container.
docker exec -it utopia_db mysql -u root -p
After you type the password, you will get to the inside the container and run any commands you want.
However, if you need to run some queries for utopia_dev database, run this command inside the container.
use utopia_dev;
Then, you will be able to use utopia_dev database and run any queries you want.
docker compose stop
If you want to start over, run these commands. But keep in mind that all the data in database will be reset.
docker compose down -v
docker compose build --no-cache
docker compose up
This project is using sql-migrate, which is a SQL schema migration tool for Golang.
Go to /backend directory and run the following command to create a migration file under /backend/migrations.
cd backend
sql-migrate new [name]
When you run docker compose up, it automatically migrates the files. Thus, you are just required to add migration files if necessary.