Quonet

A forum web application that allows users to create, delete, and like or dislike posts. Users can also update their profile information, including their username and bio. The platform supports content moderation through an admin dashboard.

www.quonet.dev

📁 Repositories

• Frontend
• Backend

📄 Summary

The frontend is built with Next.js following Bulletproof Architecture, leveraging server-side rendering for fast initial page loads, TanStack for client-side caching, and Zustand for centralized state management.

Backend is built with Go using Clean Architecture and implements a RESTful API with Fiber v2. PostgreSQL is used for data persistence via GORM, Redis handles rate limiting, and images are stored using Supabase.

💻 Tech Stack

• Frontend: Next.js, ShadCN, Tailwind CSS, Zod, TanStack, Zustand
• Backend: Go, Fiber, GORM, PostgreSQL, Redis
• Service: AWS, Supabase

🚀 Getting started

Prerequisites

• Node.js (v18 or later)
• npm

Setting up

Run this to clone project:

git clone https://github.com/mxilia/Quonet-frontend.git

After that make sure your current directory is at the root of this project.

cd Quonet-frontend

Run this to download dependencies:

npm install

Environment Variables

Here is the variable list example:

DEV=true

NEXT_PUBLIC_API_URL=http://localhost:8000/api/v2
NEXT_PUBLIC_APP_URL=http://localhost:3000

Write your own values for corresponding variables.

Usage

To run this project, execute:

npm run dev

And there you go, the frontend is up and running.

🧱 Project Structure

.
├── .vscode/
│   └── settings.json
├── assets/
│   └── quonet_page.png
├── public/
│   ├── blue-chat.png
│   ├── comment-icon.png
│   ├── default-avatar.png
│   ├── favicon.ico
│   ├── feeds-icon.png
│   ├── google-logo.png
│   ├── home-icon.png
│   ├── logo.svg
│   └── settings-icon.png
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── not-found.tsx
│   │   ├── provider.tsx
│   │   ├── (group)/
│   │   │   ├── layout.tsx
│   │   │   ├── loading.tsx
│   │   │   ├── page.tsx
│   │   │   ├── admin/
│   │   │   │   └── dashboard/
│   │   │   │       └── page.tsx
│   │   │   ├── feed/
│   │   │   │   ├── loading.tsx
│   │   │   │   └── page.tsx
│   │   │   ├── posts/
│   │   │   │   └── [id]/
│   │   │   │       ├── loading.tsx
│   │   │   │       └── page.tsx
│   │   │   ├── settings/
│   │   │   │   └── page.tsx
│   │   │   ├── threads/
│   │   │   │   └── [id]/
│   │   │   │       ├── loading.tsx
│   │   │   │       └── page.tsx
│   │   │   ├── users/
│   │   │   │   └── [id]/
│   │   │   │       ├── loading.tsx
│   │   │   │       └── page.tsx
│   │   │   └── _components/
│   │   │       ├── create-post-tab.tsx
│   │   │       ├── navbar-layout.tsx
│   │   │       └── skeletons/
│   │   │           └── create-post-tab-skeleton.tsx
│   │   └── login/
│   │       ├── layout.tsx
│   │       ├── page.tsx
│   │       └── _components/
│   │           └── redirect-button.tsx
│   ├── assets/
│   ├── components/
│   │   ├── errors/
│   │   │   └── main.tsx
│   │   ├── layouts/
│   │   └── ui/
│   │       ├── background/
│   │       │   └── blur-background.tsx
│   │       ├── dropdown/
│   │       │   └── dropdown-menu.tsx
│   │       ├── form/
│   │       │   ├── error.tsx
│   │       │   ├── field-wrapper.tsx
│   │       │   ├── form.tsx
│   │       │   ├── input.tsx
│   │       │   ├── label.tsx
│   │       │   ├── select.tsx
│   │       │   └── textarea.tsx
│   │       ├── image-frame/
│   │       │   └── image-frame.tsx
│   │       ├── notification/
│   │       │   ├── notification.store.ts
│   │       │   └── notification.tsx
│   │       └── skeleton/
│   │           └── skeleton.tsx
│   ├── config/
│   │   ├── env.ts
│   │   └── path.ts
│   ├── features/
│   │   ├── announcements/
│   │   │   ├── api/
│   │   │   │   ├── create-announcement.ts
│   │   │   │   ├── delete-announcement.ts
│   │   │   │   └── get-announcements.ts
│   │   │   └── components/
│   │   │       ├── announcement-box.tsx
│   │   │       ├── announcements-list.tsx
│   │   │       ├── create-announcement.tsx
│   │   │       └── skeletons/
│   │   │           ├── announcement-box-skeleton.tsx
│   │   │           └── announcements-list-skeleton.tsx
│   │   ├── comments/
│   │   │   ├── api/
│   │   │   │   ├── create-comment.ts
│   │   │   │   ├── delete-comment.ts
│   │   │   │   ├── get-comment.ts
│   │   │   │   ├── get-comments.ts
│   │   │   │   └── update-comment.ts
│   │   │   └── components/
│   │   │       ├── comments-list.tsx
│   │   │       ├── comments.tsx
│   │   │       ├── create-comment.tsx
│   │   │       ├── delete-comment.tsx
│   │   │       └── update-comment.tsx
│   │   ├── likes/
│   │   │   ├── api/
│   │   │   │   ├── create-like.ts
│   │   │   │   ├── delete-like.ts
│   │   │   │   ├── get-like.ts
│   │   │   │   ├── get-like-count.ts
│   │   │   │   ├── get-like-state.ts
│   │   │   │   └── get-likes.ts
│   │   │   └── components/
│   │   │       ├── like-button.tsx
│   │   │       ├── like-counter.tsx
│   │   │       ├── like-modify.tsx
│   │   │       ├── likes-list.tsx
│   │   │       └── likes.tsx
│   │   ├── posts/
│   │   │   ├── api/
│   │   │   │   ├── create-post.ts
│   │   │   │   ├── delete-post.ts
│   │   │   │   ├── get-post.ts
│   │   │   │   ├── get-posts.ts
│   │   │   │   ├── get-private-post.ts
│   │   │   │   ├── get-private-posts.ts
│   │   │   │   ├── get-top-liked-posts.ts
│   │   │   │   └── update-post.ts
│   │   │   └── components/
│   │   │       ├── configure-post.tsx
│   │   │       ├── create-post.tsx
│   │   │       ├── delete-post.tsx
│   │   │       ├── full-post.tsx
│   │   │       ├── medium-post.tsx
│   │   │       ├── posts-list.tsx
│   │   │       ├── private-posts.tsx
│   │   │       ├── private-posts-list.tsx
│   │   │       ├── small-post.tsx
│   │   │       ├── top-liked-post-list.tsx
│   │   │       ├── update-post.tsx
│   │   │       └── skeletons/
│   │   │           ├── full-post-skeleton.tsx
│   │   │           ├── medium-post-skeleton.tsx
│   │   │           ├── posts-list-skeleton.tsx
│   │   │           ├── small-post-skeleton.tsx
│   │   │           └── top-liked-posts-list-skeleton.tsx
│   │   ├── threads/
│   │   │   ├── api/
│   │   │   │   ├── create-thread.ts
│   │   │   │   ├── delete-thread.ts
│   │   │   │   ├── get-thread.ts
│   │   │   │   └── get-threads.ts
│   │   │   └── components/
│   │   │       ├── create-thread.tsx
│   │   │       ├── delete-thread.tsx
│   │   │       ├── full-thread.tsx
│   │   │       ├── select-thread.tsx
│   │   │       ├── small-thread.tsx
│   │   │       ├── threads.tsx
│   │   │       ├── threads-list.tsx
│   │   │       └── skeletons/
│   │   │           ├── full-thread-skeleton.tsx
│   │   │           ├── small-thread-skeleton.tsx
│   │   │           └── threads-list-skeleton.tsx
│   │   └── users/
│   │       ├── api/
│   │       │   ├── delete-user.ts
│   │       │   ├── get-user.ts
│   │       │   ├── get-users.ts
│   │       │   └── update-user.ts
│   │       └── components/
│   │           ├── admin-users-list.tsx
│   │           ├── delete-user.tsx
│   │           ├── full-user.tsx
│   │           ├── small-user.tsx
│   │           ├── update-user-bio.tsx
│   │           ├── update-user-handler.tsx
│   │           ├── update-user-role.tsx
│   │           └── skeletons/
│   │               ├── full-user-skeleton.tsx
│   │               ├── small-user-skeleton.tsx
│   │               └── users-list-skeleton.tsx
│   ├── lib/
│   │   ├── api-client.ts
│   │   ├── auth.ts
│   │   ├── authorization.ts
│   │   ├── react-query.ts
│   │   ├── redirect-client.ts
│   │   └── utils.ts
│   ├── styles/
│   │   └── globals.css
│   ├── types/
│   │   └── api.ts
│   └── utils/
│       ├── debounce.ts
│       └── format.ts
├── .env
├── .env.example
├── .env.production
├── .gitignore
├── .prettierignore
├── .prettierrc
├── components.json
├── eslint.config.mjs
├── LICENSE
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── README.md
└── tsconfig.json