Cafe Escobar

A responsive e-commerce website for a fictional Colombian specialty coffee brand. Built as a team project for web development coursework.

Live Demo

View Website

Tech Stack

Frontend

• HTML5
• CSS3
• JavaScript
• Bootstrap 4

Libraries

• jQuery
• Owl Carousel
• Tempus Dominus
• Font Awesome

Backend

• MongoDB
• REST API integration

Features

• Responsive design across all devices
• Product browsing and filtering
• Shopping cart management
• Checkout forms with client-side validation
• Dynamic product displays
• API calls to MongoDB backend

What I Built

Frontend Development

• Designed and implemented all customer-facing pages
• Created responsive layouts using Bootstrap grid system
• Built interactive product displays with JavaScript
• Developed shopping cart functionality with state management
• Implemented form validation for checkout process

API Integration

• Connected frontend to MongoDB backend
• Handled asynchronous data fetching
• Managed error states and loading indicators

Project Timeline

January 2023 - May 2023

Project Structure

CafeEscobar/
├── index.html
├── about.html
├── service.html
├── contact.html
├── css/
│   └── style.min.css
├── js/
│   └── main.js
├── img/
├── lib/
└── mail/

Key Learnings

• Building responsive layouts with Bootstrap
• Managing application state in vanilla JavaScript
• Implementing client-side form validation
• Working with RESTful APIs
• Collaborating on a team project with version control

Future Improvements

• Add unit tests for JavaScript functions
• Implement real payment processing
• Add user authentication
• Optimize images for faster load times
• Add accessibility features (ARIA labels, keyboard navigation)

Contributors

Guadalupe Arbeláez, Kar Ng, Steve Eckardt
January 2023 - May 2023
Web Development Capstone, City College of San Francisco
This project is for educational and portfolio purposes.