A HealthCare Management System

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🕸️ Snippets (Code to Copy)
6. 🔗 Assets
7. 🚀 More

🤖 Introduction

Showcase your projects with a full-stack app built using Next.js. This tool integrates React, Firebase, and NextAuth for seamless authentication, while Tailwind CSS offers sleek styling. Enhance form management with React Hook Form or Yup, and leverage Google Cloud for robust hosting and scalability. Perfect for developers!

If you're getting started and need assistance or face any bugs, join our active Discord community with over 34k+ members. It's a place where people help each other out.

⚙️ Tech Stack

• Next.js
• Firebase
• NextAuth
• TailwindCSS
• Flowbite
• ReactHookForm

🔋 Features

👉 Register as a User: Users can sign up and create a personal projects.

👉 Add a New Project: Allows authenticated users to upload their projects (e.g., images, videos, descriptions) to the gallery.

👉 Manage Projects on Admin Side: Administrators can efficiently view and handle all created projects.

👉 Project Deleting: Administrators have the ability to delete any project as needed.

👉 Complete Responsiveness: The application works seamlessly on all device types and screen sizes.

👉 File Upload Using Firebase firestore: Users can upload and store files securely within the app using firebase firestore services.

and many more, including code architecture and reusability

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• yarn (Package Manager)

Cloning the Repository

git clone https://github.com/Hi-Dear-486/Projects-Gallery-Tool.git
cd ./

Installation

Install the project dependencies using yarn:

yarn install

Set Up Environment Variables

Create a new file named .env.local in the root of your project and add the following content:

#Firebase
NEXT_PUBLIC_FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID

Replace the placeholder values with your actual Firebase credentials. You can obtain these credentials by signing up on the [Firebase website (https://firebase.google.com/).

Running the Project

yarn  run dev

Open http://localhost:3000 in your browser to view the project.

🕸️ Snippets

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
      },
      boxShadow: {
        5: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px",
      },
    },
  },
  plugins: [],
};

app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

app/(authprovider)/AuthProvider.jsx

"use client";
import React from "react";
import { SessionProvider } from "next-auth/react";
const Authprovider = ({ children }) => {
  return <SessionProvider>{children}</SessionProvider>;
};

export default Authprovider;

app/api/auth/[...nextauth]/route.js

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_Client_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
});

export { handler as GET, handler as POST };
</details>

<details>
<summary><code>lib/firebase.js</code></summary>

```javscript
import { initializeApp } from "firebase/app";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export default app;

🚀 More

Advance your skills with Next.js 14

Enjoyed creating this project? Dive deeper for a richer learning adventure. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!