Website Theme⭐ Online Group-Study assignment Web App

Welcome to FriendAssign,, you will build a web application for online group study with friends (Every registered user is a friend of others). Users can create assignments, complete them, and grade their friends' assignments.

📌 Project Overview

Detail	Information
GitHub Client site	FriendAssign-client
Live Site client	FriendAssign-firebase
GitHub server site	FriendAssign-server
Portfolio GitHub	Md Mostakim Hosen-portfolio
Portfolio Live	Mostakim-Hosen-live
Created On	20 May 2025, 10:32 AM GMT+6
Location	Mohanpur, Rajshahi, Bangladesh

🌐 Live Site

🔗 Deployed App(https://assignmen-11-app.web.app/)

---

📚 FriendAssign — Online Group Study Platform

Collaborate, Create, and Grade Assignments with Friends

---

---

📁 Project Structure

Here's a high-level overview of the project's file structure:

├── .env
├── .firebase
└── hosting.ZGlzdA.cache
├── .firebaserc
├── .gitignore
├── README.md
├── eslint.config.js
├── firebase.json
├── index.html
├── package-lock.json
├── package.json
├── public
└── vite.svg
├── src
├── App.css
├── App.jsx
├── Components
│ ├── AllGroup.jsx
│ ├── AllGroupDetails.jsx
│ ├── Banner.jsx
│ ├── Benifit.jsx
│ ├── Dashboard.jsx
│ ├── Faq.jsx
│ ├── Features.jsx
│ ├── Footer.jsx
│ ├── LoadingSpinner.jsx
│ ├── Navbar.jsx
│ └── Pending.jsx
├── Layout
│ ├── AuthContext.jsx
│ ├── AuthLayout.jsx
│ ├── DashboardLayout.jsx
│ └── HomeLayouts.jsx
├── animation
│ ├── Walking.jsx
│ ├── index.js
│ ├── loginAnimation.json
│ ├── loginAnimation2.json
│ └── loginAnimation3.json
├── assets
│ └── react.svg
├── firebase
│ └── FireBase.config.js
├── index.css
├── main.jsx
├── pages
│ ├── Contact.jsx
│ ├── CreateAssignment.jsx
│ ├── DashNav.jsx
│ ├── ErrorPage.jsx
│ ├── ForgotPassword.jsx
│ ├── LiveStats.jsx
│ ├── Login.jsx
│ ├── MyAssignments.jsx
│ ├── Profile.jsx
│ ├── Register.jsx
│ ├── Sidebar.jsx
│ ├── Terms.jsx
│ ├── Testimonials.jsx
│ ├── TrendingAssignments.jsx
│ └── UpdateGroup.jsx
├── provider
│ └── MyProvider.jsx
└── routes
│ ├── PrivateRoute.jsx
│ ├── ProtectedRoute.jsx
│ └── Router.jsx
└── vite.config.js

---

🧭 Routing Structure (with Layouts)

🔐 Auth Layout

• /login → Login.jsx
• /register → Register.jsx
• /forgot-password → ForgotPassword.jsx

🏠 Main Layout (Landing Pages)

• / → Home.jsx
• /about → About.jsx
• /contact → Contact.jsx
• /faq → Faq.jsx
• /privacy-policy → PrivacyPolicy.jsx
• /terms-and-conditions → TermsCondintion.jsx

📚 Blog Feature (via BlogsLayout.jsx)

• /blogs → Blogs.jsx
• /blogs/:id → BlogDetails.jsx
• /create-blog → CreateBlog.jsx

👤 Profile

• /my-profile → MyProfile.jsx
• /update-profile → UpdateProfile.jsx

---

🔑 Features

✅ Authentication

• Firebase Auth integration
• Login, Register, Forgot Password
• Auth-protected routes

📝 Blog System

• View all blogs
• Blog details with comments, read time, tags
• Create and share new blogs

---

🛠️ Tech Stack

• Frontend: React.js, Tailwind CSS
• Routing: React Router
• Forms: React Hook Form, React Day Picker
• State Management: React Context API (AuthProvider)
• Animations: Lottie
• Toast Notifications: React Hot Toast
• Deployment: GitHub Pages / Vercel / Netlify (configure as needed)
• Build Tool: Vite

---

📦 Installation

bun install # or npm install
bun run dev # or npm run dev

---

📌 TODOs

• ---

👏 Credits

• Design inspired by classic cooking & recipe books
• Icons via Lucide and Heroicons
• Lottie animations from LottieFiles

---

📄 License

This project is licensed under the MIT License.

---

Made with ❤️ for food enthusiasts and aspiring chefs.

"Food is symbolic of love when words are inadequate." — Alan D. Wolfelt

----- preivous version ------

---

🚀 Features

🔐 Authentication & Security

• Email/Password Login: Secure user authentication via Firebase.
• Google Sign-In: Quick access using Google accounts.
• Protected Routes: Restricts access to sensitive pages like profile and recipe details.
• Password Reset: Users can reset passwords through email verification.

👤 User Profile

• Profile Page: View and edit user information, including display name and photo.
• Update Profile: Modify personal details securely.

📄 Additional Pages

• About: Learn more about FlavorBook.
• Contact: Get in touch with the team.
• FAQ: Frequently Asked Questions.
• Privacy Policy: Understand how user data is handled.
• Terms & Conditions: Legal information regarding the use of FlavorBook.

🎨 UI/UX Enhancements

• Responsive Design: Optimized for various devices.
• Tailwind CSS & DaisyUI: Utilized for styling and component design.
• Lottie Animations: Engaging animations for better user experience.
• Swiper: Interactive sliders for showcasing content.

---

A Little More About Me...

Hello i'm Md Mostakim Hosen.

I'm a passionate Frontend Developer with a strong focus on creating clean, responsive, and user-friendly web interfaces. I enjoy building modern web applications using technologies like HTML, CSS, JavaScript, React.js, and Tailwind CSS. I believe in writing readable code, maintaining UI consistency, and ensuring a smooth user experience across all devices. I'm always eager to learn new tools and improve my skills to deliver better results.

constmostakim={pronouns: "he"|"him",code: [Javascript,Typescript,HTML,CSS,Python,Java],tools: [React,Node,Storybook,Styled-Components],architecture: ["microservices","event-driven","design system pattern"],techCommunities: {coorganizer: "AfroPython",speaker: "Latinity",mentor: "EducaTRANSforma"},challenge: "I am doing the #100DaysOfCode challenge focused on react and typescript"}

🌐 Socials:

💻 Tech Stack:

📊 GitHub Stats:

---