FB Clone

Built with NextJS, TypeScript, TailwindCSS, MUI, and Firebase for authentication and the DB.

Table of Contents

• Stack Overview
• Getting Started
  • Configuration
  • Installation
• Customization
• License
• Let's Connect!

---

Stack Overview:

---

`NextJS` is a framework for building server-rendered React applications. It allows for efficient performance and optimized SEO by pre-rendering pages on the server.

TypeScript is a superset of JavaScript that adds optional static typing and other features to improve code quality and maintainability.

TailwindCSS is a utility-first CSS framework that makes it easy to create consistent, responsive designs.

MUI is a Material-UI library for React that provides a set of pre-built components that follow the Material Design guidelines.

Firebase is a Backend-as-a-Service platform that provides a variety of services for building web and mobile applications, including authentication, database storage, and cloud functions.

Together, these technologies can be used to build a full-stack web application with user authentication, login, API endpoints, and database storage while rendering a consistent and responsive design that optimizes performance, size, and scalability.

---

Getting Started

---

Configuration

---

### Firebase config:

Register a new web app under your Firebase project and copy the config to your .env.local file:

NEXT_PUBLIC_FIREBASE_API_KEY

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN

NEXT_PUBLIC_FIREBASE_PROJECT_ID

NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET

NEXT_PUBLIC_FIREBASE_MESSAGING_SET

NEXT_PUBLIC_FIREBASE_APP_ID

NEXT_PUBLIC_BASE_URL

TypeScript config:

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Tailwind config:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("tailwind-scrollbar-hide"), require("tailwind-scrollbar")],
};

NextJS config:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig

---

Installation

---

Install dependencies:

npm install
# or
yarn

Development

Start the development server:

npm run dev
# or
yarn dev

Production

Build the application:

npm run build
# or
yarn build

Start the application:

npm run start
# or
yarn start

---

License

---

MIT

---

Let's Connect!

---