A Mini Social Network, with the idea from Facebook.
Documentation โข Report Bug โข Request Feature
๐ Table of Contents
- Sign In/ Up: allow user to create and login to their account with: their own account or Gmail
- Profile: user can update their information and customize their profile
- Posts: user can create posts with status and images
- Post interact: Interact with other posts such as like, comment
- Chat: communicate with other users via chat box or chatbot
- Open network: user can send friend request to other users and interact with them such as: unfriend, block
- Frontend:
- UI framework: NextJS
- CSS framework: Tailwind CSS
- Language: TypeScript
- Backend:
- Language: Python
- Framework: Django
- Database: PostgreSQL
- Operations:
- Deploy:
- Front-end: Netlify
- Back-end: Render
- CI/CD: Github Actions
- Monitoring: Prometheus, Grafana
- Deploy:
$ tree src
src
โโโ common
โ โโโ components
โ โ โโโ marketing
โ โ โโโ Card
โ โ โ โโโ Card.module.css
โ โ โ โโโ Card.tsx
โ โ โ โโโ index.ts
โ โ โโโ Footer
โ โ โ โโโ Footer.module.css
โ โ โ โโโ Footer.tsx
โ โ โ โโโ index.ts
โ โ โโโ SimpleGrid
โ โ โโโ SimpleGrid.module.css
โ โ โโโ SimpleGrid.tsx
โ โ โโโ index.ts
โ โโโ styles
โ โโโ globals.css
โโโ modules
โ โโโ home
โ โโโ Home.module.css
โ โโโ Home.tsx
โ โโโ index.ts
โโโ pages
โโโ _app.tsx
โโโ api
โ โโโ hello.ts
โโโ index.tsx
- Python:
>= 3.10.7
. Install here. - Nodejs: >= 18.17.0
To run this project, you need to add the following environment variables to your .env
file in /
:
-
App configs: Create
.env
file in./
...and add the following environment variables to it:
Example:
... # environment variables
You can also check out the file .env.example
to see all required environment variables.
Note: If you want to use this example environment, you need to rename it to
.env
.
# Clone this repository
git clone https://github.com/QuanBlue/mini-facebook
Note If you're using Linux Bash for Windows, see this guide or use
node
from the command prompt.
- Sign In/ Up
- User account (username, password)
- Gmail
- Profile
- Init after Sign Up
- Update Profile
- Posts
- Create: status, images
- Interaction:
- Like
- Comment
- Chat (socket)
- Between users
- Chatbot (OpenAI API)
- Friend request, unfriend, block
- CI/CD
- Responsive design to the parent instead of viewport
- Use: Container Queries
- Ref: https://github.com/tailwindlabs/tailwindcss-container-queries
Contributions are always welcome!
This software uses the following open source packages:
- Next.js enterprise projects structure here
- Next.js Project Structure
- Emojis are taken from here
Distributed under the MIT License. See LICENSE
for more information.
Bento @quanblue ยท GitHub @QuanBlue ยท Gmail quannguyenthanh558@gmail.com