Frontend Development Projects

A collection of modern frontend development projects completed as part of the DevChallenges.io curriculum. Each project demonstrates different aspects of web development, from simple static pages to complex interactive applications.

About DevChallenges.io

DevChallenges.io is a platform that provides real-world projects to help developers improve their skills. Each challenge comes with professional designs, user stories, and API specifications to create production-ready applications.

Projects Overview

1. Coffee Listing Page

• A responsive coffee product listing with filtering capabilities
• Technologies: HTML5, CSS3, Webflow
• Features:
  • Reusable card components
  • Filter between all/available products
  • Popular tag and availability status
• View Demo

2. Recipe Page

• A recipe discovery application with category filtering and search
• Technologies: React, Vite, Tailwind CSS, React Router, Axios
• Features:
  • Multiple recipe categories
  • Search by name/instructions/area
  • Detailed recipe information
  • Sorting capabilities
• View Demo

3. Property Listing

• Real estate listing application with advanced filtering
• Technologies: React, Vite, Tailwind CSS
• Features:
  • Location-based filtering
  • Superhost status filter
  • Property type filtering
  • Reusable property cards
• View Demo

4. GitHub Profile Explorer

• GitHub user profile and repository explorer
• Technologies: Vanilla JavaScript, GitHub API, Vite
• Features:
  • User search functionality
  • Repository listing
  • Profile statistics
  • Responsive design
• View Demo

5. Translation Application

• Modern translation app with language detection
• Technologies: Vanilla JavaScript, CSS3
• Features:
  • Automatic language detection
  • Text-to-speech support
  • Copy to clipboard
  • Multiple language support
• View Demo

6. Task Manager

• Modern task management application with drag-and-drop functionality
• Technologies: React, Vite, Tailwind CSS
• Features:
  • Dark/Light theme support
  • Drag and drop tasks
  • Board management
  • Responsive sidebar
• View Demo

7. Weather App

• Real-time weather information and forecasting application
• Technologies: Vue.js 3, Vite, OpenWeather API
• Features:
  • Location-based weather
  • 24-hour forecast with 3-hour intervals
  • 5-day weather forecast
  • Major cities summary
  • Temperature unit conversion
• View Demo

8. AI Chatbot

• Modern, responsive AI chatbot interface
• Technologies: Vanilla JavaScript, Tailwind CSS, PostCSS, Vite
• Features:
  • Clean, modern chat interface
  • Conversation management
  • Local storage persistence
  • Mobile-responsive design
  • Title editing and conversation deletion
• View Demo

9. Country Quiz

• Interactive quiz application about countries
• Technologies: Next.js 15, TypeScript, Redux Toolkit, React Query
• Features:
  • Dynamic question generation
  • Capital and flag questions
  • Progress tracking
  • Immediate feedback
  • Final score display
• View Demo

10. World Countries Explorer

• Comprehensive country information and ranking application
• Technologies: React, Vite, Tailwind CSS
• Features:
  • Population/Area sorting
  • Region filtering
  • UN membership filter
  • Country details with neighbors
  • Search by name/region
• View Demo

Getting Started

Most projects follow a similar setup pattern:

# Clone the specific project repository
git clone [project-repo-url]

# Install dependencies
npm install

# Start development server
npm run dev

Technologies Used

The projects showcase proficiency in various modern web technologies:

• Frontend Frameworks: React, Vue.js, Next.js
• Build Tools: Vite, Webpack
• Styling: Tailwind CSS, CSS3, PostCSS
• State Management: Redux Toolkit
• APIs: REST Countries, OpenWeather, GitHub
• Languages: JavaScript, TypeScript