Skip to content

VYDev37/Yapper-V1

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Project Description

Yapper (V1)

  • Template: React Typescript
  • Project Type: Social Media
  • Inspiration sources: Twitter, Facebook
  • Frontend External Dependencies: Bootstrap, FontAwesome, Sweetalert2, React (+ included packages), Vite (+ included packages), Axios
  • Backend External Dependencies: Typescript, Hono, pg, Drizzle, argon2, jsonwebtoken, nodemailer
  • Developer Note: V2 will be rewritten in Tailwind CSS and for the android version, it might be written in V2 along with React Native usage
  • Production Ready: No
  • Package Manager: PNPM
  • Runtime: Bun.js
  • Database: PostgreSQL

Setup

Database

  1. Install database tool for PostgreSQL and its driver. (I use DBeaver as the tool here for offline, but you can use Supabase for online version.)
  2. Use the schema.sql file or copy the script inside to the database tool
  3. Generate the database URL and copy it to DATABASE_URL field in .env Note: If the schema.sql file is broken, you can just generate new one with command pnpm migrate-db and do step 2.

Backend

  • Install BunJS

  • Change the .env.example to .env and fill the data

  • To get raw database schema, use drizzle-kit

  • Run cd server

  • Run pnpm install

  • Run pnpm start

  • Developer Note: Make sure to use an actual gmail username for email_user and Google App Password for the email_pass

Frontend

  • Open new terminal
  • Run cd client
  • Run pnpm install
  • Run pnpm run dev

Credits (Assets)

Features

  • Login
  • Register
  • Email verification
  • Reset Password
  • Basic Security Functions (for pages)
  • Sidebar
  • Home Page
  • Upload, Like and Delete posts (images are also supported)
  • Comment Post (Add, load, reply, like, like reply, and delete)
  • Report Post
  • Search Posts (Search User + Post)
  • Administrator / Developer Features (Ban User, Unban User)
  • Viewing Profile + Functionalities including: Follow, View User Posts, Block User, and Edit (for owners)
  • Notifications Page
  • Messages Page
  • Settings Page

About

A simple social media project built with React and Hono in TypeScript.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages