QuanBlue/mini-facebook

A Mini Social Network, with the idea from Facebook

Mini Facebook

A Mini Social Network, with the idea from Facebook.

Documentation • Report Bug • Request Feature

📖 Table of Contents

• Key Features
• Tech Stack
• Getting Started
  • Project Structure
  • Prerequisites
  • Environment Variables
  • Installation
• Roadmap
• FAQ
• Contributors
• Credits
• License

Key Features

• 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

Tech Stack

• 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

Getting Started

Project Structure

$ 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

Prerequisites

• Python: >= 3.10.7. Install here.
• Nodejs: >= 18.17.0

Environment Variables

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.

Installation

# 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.

Roadmap

• 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

FAQ

1. Responsive design to the parent instead of viewport
   • Use: Container Queries
   • Ref: https://github.com/tailwindlabs/tailwindcss-container-queries

Contributors

Contributions are always welcome!

Credits

This software uses the following open source packages:

• Next.js enterprise projects structure here
• Next.js Project Structure
• Emojis are taken from here

License

Distributed under the MIT License. See LICENSE for more information.

---

Bento @quanblue  ·  GitHub @QuanBlue  ·  Gmail quannguyenthanh558@gmail.com