https://github.com/apollo-level2-web-dev/l2b4-frontend-track-assignment-5
https://github.com/apollo-level2-web-dev/l2b4-frontend-track-assignment-5
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/apollo-level2-web-dev/l2b4-frontend-track-assignment-5
- Owner: Apollo-Level2-Web-Dev
- Created: 2025-02-07T18:08:39.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-08T17:13:21.000Z (4 months ago)
- Last Synced: 2025-04-12T22:56:55.013Z (about 1 month ago)
- Size: 9.77 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Assignment 5 - Personal Portfolio & Blog Website
## 🎯 Objective
Build a personal portfolio and blog website using Next.js. This project will help you learn dynamic routing, API integration, authentication, state management, and deployment in a fun and practical way.
---
## 🔹 Features Breakdown
### 1️⃣ Public Pages (Accessible to All Users)
#### ✅ Home Page (/)
- Display your portfolio introduction (name, bio, and profile picture).
- Showcase your skills using icons or a skill bar.
- Highlight featured projects (static or fetched from an API).
- resume download button
#### ✅ Projects Page (/projects)
- List of projects with images, descriptions, and links.
- Clicking on a project opens a detailed page (/projects/[id]).
#### ✅ Blog Page (/blog)
- Display a list of blogs (fetched from an API or JSON file).
- Clicking on a blog opens a detailed blog page (/blog/[id]).
#### ✅ Contact Page (/contact)
- Simple contact form (name, email, message).
- Save messages in local storage or a database.
---
### 2️⃣ Dashboard (Only for Logged-in Users)💡
#### ✅ Login (/dashboard)
- Social login using Next Auth.
- Only authenticated users can access the dashboard.
#### ✅ Blog Management (/dashboard/blogs)
- Create, read, edit, or delete blog posts.
- Form with related fields like title, content, image, and category.
#### ✅ Project Management (/dashboard/projects)
- CRUD operations (Create, Read, Update, Delete) for projects.
- Upload project image, title, live link, descriptions, etc.
#### ✅ Message Management (/dashboard/messages)
- View messages submitted from the contact form.
---
## 🔹 Technical Requirements
### ✅ Frontend
- Next.js with TypeScript.
- Use Tailwind CSS for styling or any kind of UI library or framework.
- Implement dynamic routes (/projects/[id], /blog/[id]).
### ✅ Backend💡
- Create a simple backend using Node/Express to manage Blog, Project, and other essential data.
- Backend API can be accessible publicly.
### ✅ Database
- MongoDB.
### ✅ Authentication💡
- Social login using Next Auth.
### ✅ Deployment
- Deploy the website on Vercel.
- Store projects and blogs in MongoDB
---
## 🎁 Bonus Features
- Use Next.js API routes (/api/...). (optional) 💡
- Add a dark mode toggle.
- Use Markdown for blog content. (optional)💡
- Implement server-side rendering (SSR) for better SEO.
- Use SSR, SSG, and metadata based on the use case.
- Add animations using Framer Motion or any other animation library.
---
## 📜 Submission Requirements
- ✅ GitHub Repository with a well-documented README.md.
- ✅ Live Deployment Link (Vercel).
- ✅ Demo Video (3-5 minutes) explaining the features.
## Deadline:
- 60 marks: February 11, 2025 11.59 PM
- 50 marks: February 12, 2025 11.59 PM
- 30 marks: After February 12
# Important Note:
Plagiarism will not be tolerated. Ensure that the code you submit is your own work. Any instances of plagiarism will result in 0 Marks.
#### Good luck with your assignment! If you have any questions, feel free to reach out for clarification.