step by step solve
final-programming-and-application-foundations_1751931841330.pdf
83d ago
I'll help you create a comprehensive step-by-step solution for your web development final exam project. Based on the requirements, we need to build a full-stack web application with CI/CD pipeline, database integration, and complete documentation.
Step-by-Step Project Implementation Guide
Let me break this down into manageable phases:
Phase 1: Project Planning & Setup
Step 1: Choose Your Project Concept Let's build a Personal Portfolio & Skills Manager - a web application where users can:
- View your portfolio
- Add/edit skills and experiences (CRUD operations)
- Contact form functionality
- Admin panel for content management
Step 2: Create User Stories & Requirements
Create a document with these user stories:
- As a visitor, I want to view the portfolio to learn about the developer
- As an admin, I want to add/edit skills to keep the portfolio updated
- As a visitor, I want to contact the developer through a form
- As an admin, I want to view contact submissions
Phase 2: Development Environment Setup
Step 3: Install Required Tools
# Install Node.js, Git, and VS Code first
# Then install AWS CLI
npm install -g @aws-amplify/cliStep 4: Create React Application
Phase 3: Backend API Development
Step 5: Create Node.js Backend
Create a separate backend folder and set up Express.js with MongoDB:
Backend API
v1
server.js
Phase 4: Database Setup
Step 6: MongoDB Schema & Seed Data
Database Setup
v1
seed-data.js
Phase 5: CI/CD Pipeline Setup
Step 7: GitHub Actions Workflow
CI/CD Pipeline
v1
.github/workflows/deploy.yml
Phase 6: Documentation Structure
Step 8: Create Comprehensive Documentation
Here's your complete documentation structure:
Final Report Structure
1. Cover Page & Table of Contents
- Project Title: Personal Portfolio & Skills Manager
- Student Name: [Your Name]
- Course: [Course Name]
- Date: [Current Date]
2. Introduction & Objectives
What you're building and why:
- A full-stack web application for portfolio management
- Demonstrates modern web development practices
- Showcases CRUD operations and cloud deployment
- Provides real-world application experience
3. Tech Stack & Frameworks Used
Frontend:
- React 18 with TypeScript
- React Router for navigation
- Tailwind CSS for styling
- Axios for API calls
Backend:
- Node.js with Express.js
- MongoDB for database
- Mongoose ODM
- CORS middleware
Cloud & DevOps:
- AWS S3 for static hosting
- AWS CloudFront for CDN
- GitHub Actions for CI/CD
- GitHub for source control
4. Project Architecture
5. CI/CD Pipeline Overview
- Source Control: GitHub repository with feature branches
- Automated Testing: Jest unit tests run on every push
- Build Process: Automated build and optimization
- Deployment: Automatic deployment to AWS on main branch merge
- Monitoring: CloudWatch for application monitoring
6. User Stories & Requirements
Epic 1: Portfolio Display
- As a visitor, I want to view the developer's portfolio
- As a visitor, I want to see skills and experience levels
- As a visitor, I want to contact the developer
Epic 2: Content Management
- As an admin, I want to add new skills (CREATE)
- As an admin, I want to view all skills (READ)
- As an admin, I want to update skill information (UPDATE)
- As an admin, I want to delete outdated skills (DELETE)
7. Database Schema & API Endpoints
Skills Collection:
{
"_id": "ObjectId",
"name": "String",
"level": "String",
"category": "String",
"createdAt": "Date"
}API Endpoints:
GET /api/skills- Retrieve all skillsPOST /api/skills- Add new skillDELETE /api/skills/:id- Delete skillPOST /api/contact- Submit contact formGET /api/contacts- Get all contacts (admin)
8. Testing Strategy
- Unit Tests: React component testing with Jest
- Integration Tests: API endpoint testing
- E2E Tests: User workflow testing with Cypress
- Performance Tests: Lighthouse audits
9. Deployment Documentation
AWS Services Used:
- S3: Static website hosting for React frontend
- CloudFront: CDN for global content delivery
- EC2: Backend API hosting
- Route 53: Domain management
- Certificate Manager: SSL certificates
Deployment Process:
- Code push triggers GitHub Actions
- Automated testing runs
- Build process creates optimized bundles
- Frontend deploys to S3/CloudFront
- Backend deploys to EC2
- Database migrations run automatically
10. Screenshots & Demo
Include screenshots of:
- Homepage with responsive design
- Skills management (CRUD operations)
- Contact form functionality
- Admin panel interface
- Mobile responsive views
- API responses in browser dev tools
Quick Start Commands
# Clone repository
git clone [your-repo-url]
# Install frontend dependencies
npm install
# Install backend dependencies
cd backend && npm install
# Start development servers
npm run dev # Frontend
cd backend && npm start # Backend
# Run tests
npm test
# Build for production
npm run buildProject Deliverables Checklist
- ✅ Working URL: [Your deployed application URL]
- ✅ Source Code: GitHub repository with complete codebase
- ✅ User Stories: Documented requirements and user needs
- ✅ Database Schema: MongoDB collections and relationships
- ✅ API Documentation: Endpoint specifications and examples
- ✅ CI/CD Pipeline: GitHub Actions workflow
- ✅ Cloud Deployment: AWS infrastructure setup
- ✅ Testing Strategy: Unit, integration, and E2E tests
- ✅ Responsive Design: Mobile-first approach
- ✅ CRUD Operations: Full data management functionality
This comprehensive solution covers all requirements from your assignment rubric and provides a solid foundation for your final exam project. The application demonstrates modern web development practices, cloud deployment, and professional documentation standards.
To configure the generation, complete these steps:
Add PORT
Add MONGODB_URI
83d ago
steb by step show how to create and deploy eveything in deatil
83d ago
I'll provide a comprehensive step-by-step guide to create and deploy everything from scratch. This will be a complete walkthrough covering every aspect of the project.
Complete Step-by-Step Implementation Guide
Phase 1: Initial Setup & Environment Preparation
Step 1: Install Required Software
1.1 Install Node.js
# Download and install Node.js from https://nodejs.org/
# Verify installation
node --version
npm --version1.2 Install Git
# Download from https://git-scm.com/
# Verify installation
git --version1.3 Install Visual Studio Code
# Download from https://code.visualstudio.com/
# Install useful extensions:
# - ES7+ React/Redux/React-Native snippets
# - Prettier - Code formatter
# - GitLens
# - Thunder Client (for API testing)1.4 Install AWS CLI
# Windows (using installer from AWS website)
# macOS
brew install awscli
# Linux
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install
# Verify installation
aws --versionStep 2: Create Project Structure
2.1 Create Main Project Directory
mkdir portfolio-skills-manager
cd portfolio-skills-manager
# Create project structure
mkdir frontend
mkdir backend
mkdir docs
mkdir scripts2.2 Initialize Git Repository
git init
echo "node_modules/" > .gitignore
echo ".env" >> .gitignore
echo "build/" >> .gitignore
echo "dist/" >> .gitignorePhase 2: Frontend Development (React Application)
Step 3: Create React Application
3.1 Initialize React App
cd frontend
npx create-react-app . --template typescript3.2 Install Additional Dependencies
npm install react-router-dom axios
npm install -D @types/react-router-dom
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p3.3 Configure Tailwind CSS
Step 4: Test Frontend Application
4.1 Start Development Server
cd frontend
npm start4.2 Verify Application
- Open http://localhost:3000
- Navigate through all pages
- Test responsive design
- Check console for errors
Phase 3: Backend Development (Node.js + Express + MongoDB)
Step 5: Create Backend Application
5.1 Initialize Backend
cd ../backend
npm init -y5.2 Install Dependencies
npm install express mongoose cors dotenv helmet morgan
npm install -D nodemon @types/node concurrently5.3 Create Backend Structure
Step 6: Database Setup and Seeding
6.1 Install MongoDB
# For macOS
brew tap mongodb/brew
brew install mongodb-community
# For Windows - Download from MongoDB website
# For Linux
wget -qO - https://www.mongodb.org/static/pgp/server-6.0.asc | sudo apt-key add -
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/6.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-6.0.list
sudo apt-get update
sudo apt-get install -y mongodb-org6.2 Start MongoDB
# macOS/Linux
sudo systemctl start mongod
# Or using brew (macOS)
brew services start mongodb-community
# Windows - Start as service or run mongod.exe6.3 Create Database Seed Script
6.4 Run Database Scripts
cd backend
# Seed the database
node scripts/seedDatabase.js
# If you need to clear the database
node scripts/clearDatabase.jsStep 7: Test Backend API
7.1 Start Backend Server
cd backend
npm run dev7.2 Test API Endpoints
# Test health endpoint
curl http://localhost:5000/api/health
# Test skills endpoint
curl http://localhost:5000/api/skills
# Test creating a skill
curl -X POST http://localhost:5000/api/skills \
-H "Content-Type: application/json" \
-d '{"name":"Vue.js","level":"Beginner","category":"Frontend"}'
# Test contact endpoint
curl -X POST http://localhost:5000/api/contacts \
-H "Content-Type: application/json" \
-d '{"name":"Test User","email":"test@example.com","message":"This is a test message from the API"}'Phase 4: GitHub Setup and Version Control
Step 8: Create GitHub Repository
8.1 Create Repository on GitHub
- Go to https://github.com
- Click "New repository"
- Name:
portfolio-skills-manager - Description:
Full-stack portfolio management application with React, Node.js, MongoDB, and AWS deployment - Make it public
- Initialize with README
8.2 Clone and Setup Local Repository
# Go back to project root
cd ..
# Clone the repository
git clone https://github.com/yourusername/portfolio-skills-manager.git
cd portfolio-skills-manager
# Copy your existing code
cp -r ../frontend ./
cp -r ../backend ./
# Create project structure
mkdir docs
mkdir scripts8.3 Create Comprehensive .gitignore
# Create .gitignore
cat > .gitignore << 'EOF'
# Dependencies
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Production builds
build/
dist/
# Environment variables
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# IDE files
.vscode/
.idea/
*.swp
*.swo
*~
# OS generated files
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Coverage directory used by tools like istanbul
coverage/
# AWS
.aws/
# Temporary files
tmp/
temp/
EOF8.4 Create README.md
# Portfolio Skills Manager
A full-stack web application for managing personal portfolio and skills, built with React, Node.js, MongoDB, and deployed on AWS.
## 🚀 Features
- **Portfolio Display**: Showcase projects and experience
- **Skills Management**: CRUD operations for technical skills
- **Contact Form**: Allow visitors to send messages
- **Admin Panel**: Manage skills and view contact submissions
- **Responsive Design**: Mobile-first approach with Tailwind CSS
- **API Integration**: RESTful API with Express.js and MongoDB
- **Cloud Deployment**: AWS S3, CloudFront, and EC2
- **CI/CD Pipeline**: Automated deployment with GitHub Actions
## 🛠️ Technology Stack
### Frontend
- React 18 with TypeScript
- React Router for navigation
- Tailwind CSS for styling
- Axios for API calls
### Backend
- Node.js with Express.js
- MongoDB with Mongoose ODM
- Express Validator for input validation
- Helmet for security headers
- Morgan for logging
### Cloud & DevOps
- AWS S3 for static hosting
- AWS CloudFront for CDN
- AWS EC2 for backend hosting
- GitHub Actions for CI/CD
- MongoDB Atlas for database hosting
## 📋 Prerequisites
- Node.js (v16 or higher)
- MongoDB (local or Atlas)
- Git
- AWS CLI (for deployment)
## 🚀 Quick Start
### 1. Clone the repository
```bash
git clone https://github.com/yourusername/portfolio-skills-manager.git
cd portfolio-skills-manager2. Setup Backend
cd backend
npm install
cp .env.example .env
# Edit .env with your configuration
npm run dev3. Setup Frontend
cd ../frontend
npm install
npm start4. Seed Database
cd ../backend
node scripts/seedDatabase.jsProject Structure
portfolio-skills-manager/
├── frontend/ # React application
│ ├── public/
│ ├── src/
│ │ ├── components/ # Reusable components
│ │ ├── pages/ # Page components
│ │ ├── services/ # API services
│ │ ├── types/ # TypeScript types
│ │ └── App.tsx
│ └── package.json
├── backend/ # Node.js API
│ ├── models/ # MongoDB models
│ ├── routes/ # API routes
│ ├── scripts/ # Database scripts
│ ├── server.js # Main server file
│ └── package.json
├── docs/ # Documentation
├── .github/workflows/ # GitHub Actions
└── README.mdAPI Endpoints
Skills
GET /api/skills- Get all skillsPOST /api/skills- Create new skillPUT /api/skills/:id- Update skillDELETE /api/skills/:id- Delete skill
Contacts
GET /api/contacts- Get all contacts (admin)POST /api/contacts- Submit contact formPUT /api/contacts/:id/status- Update contact status
Deployment
Frontend (AWS S3 + CloudFront)
- Build the React application
- Upload to S3 bucket
- Configure CloudFront distribution
- Set up custom domain (optional)
Backend (AWS EC2)
- Launch EC2 instance
- Install Node.js and PM2
- Clone repository and install dependencies
- Configure environment variables
- Start application with PM2
Database (MongoDB Atlas)
- Create MongoDB Atlas cluster
- Configure network access
- Update connection string in environment variables
CI/CD Pipeline
The project uses GitHub Actions for automated testing and deployment:
- Test Stage: Run unit tests and linting
- Build Stage: Build React application
- Deploy Stage: Deploy to AWS (S3 for frontend, EC2 for backend)
Monitoring and Analytics
- AWS CloudWatch for application monitoring
- MongoDB Atlas monitoring for database performance
- GitHub Actions for deployment status
Contributing
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
License
This project is licensed under the MIT License - see the LICENSE file for details.
Author
Your Name
- GitHub: @yourusername
- LinkedIn: Your LinkedIn
- Email: your.email@example.com
Acknowledgments
- Built as part of a web development course final project
- Demonstrates modern full-stack development practices
- Showcases cloud deployment and CI/CD implementation
**8.5 Initial Commit**
```bash
git add .
git commit -m "Initial commit: Full-stack portfolio application
- React frontend with TypeScript and Tailwind CSS
- Node.js backend with Express and MongoDB
- Complete CRUD operations for skills management
- Contact form functionality
- Responsive design and modern UI
- Database seeding scripts
- Comprehensive documentation"
git push origin mainPhase 5: AWS Setup and Deployment
Step 9: AWS Account Setup
9.1 Create AWS Account
- Go to https://aws.amazon.com
- Create new account
- Verify email and phone
- Add payment method
- Choose Basic support plan (free)
9.2 Configure AWS CLI
aws configure
# Enter your AWS Access Key ID
# Enter your AWS Secret Access Key
# Default region: us-east-1
# Default output format: json9.3 Create IAM User for Deployment
# Create IAM policy for deployment
cat > deployment-policy.json << 'EOF'
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:GetObject",
"s3:PutObject",
"s3:DeleteObject",
"s3:ListBucket"
],
"Resource": [
"arn:aws:s3:::your-portfolio-bucket",
"arn:aws:s3:::your-portfolio-bucket/*"
]
},
{
"Effect": "Allow",
"Action": [
"cloudfront:CreateInvalidation"
],
"Resource": "*"
},
{
"Effect": "Allow",
"Action": [
"ec2:DescribeInstances",
"ec2:DescribeInstanceStatus"
],
"Resource": "*"
}
]
}
EOF
# Create IAM policy
aws iam create-policy \
--policy-name PortfolioDeploymentPolicy \
--policy-document file://deployment-policy.json
# Create IAM user
aws iam create-user --user-name portfolio-deployer
# Attach policy to user
aws iam attach-user-policy \
--user-name portfolio-deployer \
--policy-arn arn:aws:iam::YOUR-ACCOUNT-ID:policy/PortfolioDeploymentPolicy
# Create access keys
aws iam create-access-key --user-name portfolio-deployerStep 10: Frontend Deployment (S3 + CloudFront)
10.1 Create S3 Bucket
# Create S3 bucket (replace with unique name)
BUCKET_NAME="your-portfolio-$(date +%s)"
aws s3 mb s3://$BUCKET_NAME --region us-east-1
# Configure bucket for static website hosting
aws s3 website s3://$BUCKET_NAME \
--index-document index.html \
--error-document error.html
# Create bucket policy for public read access
cat > bucket-policy.json << EOF
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::$BUCKET_NAME/*"
}
]
}
EOF
aws s3api put-bucket-policy \
--bucket $BUCKET_NAME \
--policy file://bucket-policy.json10.2 Build and Deploy Frontend
cd frontend
# Create production environment file
cat > .env.production << 'EOF'
REACT_APP_API_URL=https://your-api-domain.com/api
GENERATE_SOURCEMAP=false
EOF
# Build the application
npm run build
# Deploy to S3
aws s3 sync build/ s3://$BUCKET_NAME --delete
# Test the deployment
echo "Frontend deployed to: http://$BUCKET_NAME.s3-website-us-east-1.amazonaws.com"10.3 Setup CloudFront Distribution
# Create CloudFront distribution configuration
cat > cloudfront-config.json << EOF
{
"CallerReference": "portfolio-$(date +%s)",
"Comment": "Portfolio Skills Manager Distribution",
"DefaultRootObject": "index.html",
"Origins": {
"Quantity": 1,
"Items": [
{
"Id": "S3-$BUCKET_NAME",
"DomainName": "$BUCKET_NAME.s3.amazonaws.com",
"S3OriginConfig": {
"OriginAccessIdentity": ""
}
}
]
},
"DefaultCacheBehavior": {
"TargetOriginId": "S3-$BUCKET_NAME",
"ViewerProtocolPolicy": "redirect-to-https",
"TrustedSigners": {
"Enabled": false,
"Quantity": 0
},
"ForwardedValues": {
"QueryString": false,
"Cookies": {
"Forward": "none"
}
},
"MinTTL": 0
},
"Enabled": true,
"PriceClass": "PriceClass_100"
}
EOF
# Create CloudFront distribution
aws cloudfront create-distribution \
--distribution-config file://cloudfront-config.jsonStep 11: Backend Deployment (EC2)
11.1 Launch EC2 Instance
# Create key pair for EC2 access
aws ec2 create-key-pair \
--key-name portfolio-key \
--query 'KeyMaterial' \
--output text > portfolio-key.pem
chmod 400 portfolio-key.pem
# Launch EC2 instance
aws ec2 run-instances \
--image-id ami-0c02fb55956c7d316 \
--count 1 \
--instance-type t2.micro \
--key-name portfolio-key \
--security-groups default \
--user-data file://ec2-user-data.sh11.2 Create EC2 User Data Script
cat > ec2-user-data.sh << 'EOF'
#!/bin/bash
yum update -y
yum install -y git
# Install Node.js
curl -fsSL https://rpm.nodesource.com/setup_18.x | bash -
yum install -y nodejs
# Install PM2 globally
npm install -g pm2
# Create application directory
mkdir -p /opt/portfolio
cd /opt/portfolio
# Clone repository (replace with your repo URL)
git clone https://github.com/yourusername/portfolio-skills-manager.git .
# Install backend dependencies
cd backend
npm install --production
# Create production environment file
cat > .env << 'ENVEOF'
NODE_ENV=production
PORT=5000
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/portfolio
FRONTEND_URL=https://your-cloudfront-domain.com
ENVEOF
# Start application with PM2
pm2 start server.js --name "portfolio-api"
pm2 startup
pm2 save
# Configure nginx as reverse proxy
yum install -y nginx
cat > /etc/nginx/conf.d/portfolio.conf << 'NGINXEOF'
server {
listen 80;
server_name your-domain.com;
location / {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_cache_bypass $http_upgrade;
}
}
NGINXEOF
systemctl start nginx
systemctl enable nginx
EOF11.3 Configure Security Group
# Get the instance ID
INSTANCE_ID=$(aws ec2 describe-instances \
--filters "Name=key-name,Values=portfolio-key" \
--query 'Reservations[0].Instances[0].InstanceId' \
--output text)
# Get the security group ID
SECURITY_GROUP_ID=$(aws ec2 describe-instances \
--instance-ids $INSTANCE_ID \
--query 'Reservations[0].Instances[0].SecurityGroups[0].GroupId' \
--output text)
# Allow HTTP traffic
aws ec2 authorize-security-group-ingress \
--group-id $SECURITY_GROUP_ID \
--protocol tcp \
--port 80 \
--cidr 0.0.0.0/0
# Allow HTTPS traffic
aws ec2 authorize-security-group-ingress \
--group-id $SECURITY_GROUP_ID \
--protocol tcp \
--port 443 \
--cidr 0.0.0.0/0Step 12: Database Setup (MongoDB Atlas)
12.1 Create MongoDB Atlas Account
- Go to https://www.mongodb.com/atlas
- Sign up for free account
- Create new project: "Portfolio Skills Manager"
- Build a cluster (choose free tier)
- Choose AWS as cloud provider
- Select region closest to your EC2 instance
12.2 Configure Database Access
# In MongoDB Atlas dashboard:
# 1. Go to Database Access
# 2. Add new database user
# 3. Choose password authentication
# 4. Username: portfolio-user
# 5. Generate secure password
# 6. Grant read/write access to any database
# 7. Go to Network Access
# 8. Add IP Address
# 9. Add your EC2 instance IP
# 10. Add 0.0.0.0/0 for development (restrict in production)12.3 Update Backend Configuration
# SSH into EC2 instance
ssh -i portfolio-key.pem ec2-user@YOUR-EC2-PUBLIC-IP
# Update environment variables
sudo nano /opt/portfolio/backend/.env
# Update MONGODB_URI with Atlas connection string
MONGODB_URI=mongodb+srv://portfolio-user:YOUR-PASSWORD@cluster0.xxxxx.mongodb.net/portfolio?retryWrites=true&w=majority
# Restart the application
pm2 restart portfolio-api
# Check application status
pm2 status
pm2 logs portfolio-apiPhase 6: CI/CD Pipeline Setup
Step 13: GitHub Actions Configuration
13.1 Create GitHub Secrets
# In your GitHub repository, go to Settings > Secrets and variables > Actions
# Add the following secrets:
# AWS_ACCESS_KEY_ID: Your AWS access key
# AWS_SECRET_ACCESS_KEY: Your AWS secret key
# S3_BUCKET_NAME: Your S3 bucket name
# CLOUDFRONT_DISTRIBUTION_ID: Your CloudFront distribution ID
# EC2_HOST: Your EC2 instance public IP
# EC2_USERNAME: ec2-user
# EC2_PRIVATE_KEY: Contents of your portfolio-key.pem file13.2 Create GitHub Actions Workflow
Step 14: Testing and Quality Assurance
14.1 Add Frontend Tests
14.2 Add Backend Tests
To configure the generation, complete these steps:
Add REACT_APP_API_URL
Add FRONTEND_URL
Run seedDatabase.js
Run clearDatabase.js
83d ago
Here’s a clear prompt you can use to guide yourself (or send to AI tools like ChatGPT, GitHub Copilot, or generate project scaffolds) for this assignment:✅ Final Project Prompt:Build a full-stack, CRUD-enabled, portfolio-style web application that allows users to add, view, update, and delete skills, experiences, and projects. The app should be built with React, Node.js + Express, and MongoDB or PostgreSQL. It should be hosted publicly on AWS, use GitHub Actions for CI/CD, and include user-friendly UI with a Figma-based design.🛠️ Requirements Breakdown:📌 App Features:📝 Users can:Add new skills, experiences, or projects.View them in a list or card format.Edit and delete entries.Search or filter content (optional).Simple, responsive design.🧱 Tech Stack:Layer Tech Frontend React + Tailwind CSS Backend Node.js + Express.js Database MongoDB or PostgreSQL Hosting AWS (S3 for frontend, EC2/Render for backend) CI/CD GitHub Actions (auto deploy on push) Source Git + GitHub Prototypes Figma (for wireframes) API Test Postman (test CRUD routes)📤 Deliverables:Live App URL hosted on AWSGitHub Repo with code & workflow setupDatabase Schema & API routesUser Stories / Requirements (Agile format)CI/CD Setup DocumentationArchitecture Diagram (frontend ↔ backend ↔ DB)Screenshots of app + API + DBFigma Wireframes or UI PrototypesTesting StrategyFinal Report (10–15 pages) with:Cover, TOC, objectives, tech stack, etc.Lessons learned / reflections✨ Optional Bonus Ideas:Use authentication (JWT or session-based)Add multiple pages with React RouterUse multiple data sources (SQL + NoSQL)Unit testing with JestShow GitHub Actions history (build, deploy logs)Would you like:🔧 Starter template setup (React + Express + Mongo)?📄 Final Report Word document template?🧠 Agile-style user stories for this idea?Let me know!
83d ago