se_project_spots

Project 3: Spots

Overview

• Intro
• Figma
• Images

Intro

Spots is a fully responsive and accessible web application designed to deliver an engaging user experience across different screen sizes. It features dynamic card management, form validation, and smooth modal interactions. Built using Figma wireframes as the primary design reference, this project showcases my ability to transform designs into functional and visually appealing web pages.

Functionality:

• Responsive Design:
  • Ensures seamless display across popular screen sizes, including desktops, tablets, and smartphones.
  • Content and layout adapt fluidly to provide a consistent user experience.
• Dynamic Card Management:
  • Users can add, delete, and interact with cards dynamically.
  • New cards appear instantly at the top of the container when created.
  • Includes a “like” feature for user engagement.
• Interactive Modals:
  • Smooth opening and closing transitions enhance the user experience.
  • Modals can be closed by clicking on the overlay or pressing the “Esc” key.
• Form Validation:
  • Profile Form:
    • Validates “Name” (2-40 characters) and “Description” (2-200 characters).
  • New Card Form:
    • Validates “Caption” (2-30 characters) and “Image Link” (valid URL).
  • Provides real-time error messages and visual feedback to users.
  • Resets forms after successful submission to ensure a clean state for the next use.
• Interactive Buttons and Hover Effects:
  • Buttons feature hover effects to provide users with visual feedback.

Development Process:

Tools & Environment

• Figma: Used as the design blueprint to guide the development process.

• Visual Studio Code (VS Code):
  • Primary development environment for writing, testing, and debugging code.
  • Integrated terminal used for managing dependencies and running local development servers.
• GitHub:
  • Version control for tracking code changes and managing branches.
  • Regular commits and pushes ensured code was securely backed up and accessible.

Approach

• Carefully translated Figma wireframes into a responsive and interactive layout.
• Implemented best practices in modular JavaScript to ensure maintainable and scalable code.
• Regularly tested features to ensure compatibility across devices and browsers.

Figma

• Link to the project on Figma

Google Drive Video

• Link to project video

• Link to GitHub pages

Images