As part of a group assignment, we developed a fitness-themed web application. The project allowed us to choose a theme and create a responsive, multi-functional website that adhered to REST principles. Our fitness website included features such as an exercise library, a webshop, and user authentication with verification emails.

Objectives

  1. Create a multi-page web application with a responsive design.
  2. Provide a platform for users to explore, purchase products, and learn about the team behind the website.
  3. Implement a robust user authentication system, including email verification.
  4. Enable users to contact us via a form that sends an email directly to the team.

Features

Website Pages

  1. Homepage:
    • A welcoming and interactive homepage with a slideshow of images and content.
    • A navigation bar with links to different sections of the website. screenshot of fitness website home page

      A screenshot of the fitness website’s home page

  2. Exercise Library:
    • A curated list of exercises with descriptions, images, and tips.
    • Search and filter options for exercise types (e.g., cardio, strength).
  3. Webshop:
    • Products for sale include protein powders, protein bars, and other fitness-related items.
    • Shopping cart feature allowing users to add, remove, and review purchases.
    • Checkout process integrated with confirmation emails. screenshot of the fitness webshop

      A screenshot of the the fitness webshop

  4. About Us:
    • A dedicated page introducing the team behind the website.
    • Highlights our passion for fitness and technology.
  5. Contact Us:
    • A form where users can fill in their name, email, and message. - Messages are sent directly to the team via email for quick responses. screenshot of the fitness webshop

      A screenshot of the the contact page

  6. Log Activity
    • A page where registered users can log a fitness exercise activity. screenshot of the fitness webshop

      A screenshot of the the contact page

User Authentication

  • Registration & Login:
    • Users can create accounts and log in securely. screenshot of the fitness webshop

      A screenshot of the the sign up page

  • Verification Email:
    • Upon registration, users receive a custom HTML email to verify their accounts.

Administrator Features

  • Manage products in the webshop.
  • View user registrations and purchase activity.

Technology Stack

  • Front-End:
    • Built with HTML5, CSS3, and Vanilla JavaScript for interactive and responsive design.
    • No external frameworks (e.g., Bootstrap) to demonstrate core development skills.
  • Back-End:
    • Developed with Node.js and Express for handling server-side logic.
    • RESTful APIs for communication between the front-end and back-end.
  • Database:
    • SQL database with tables for users, products, and orders.

Development Workflow

  • GitLab:
    • Used for version control and project management.
    • Milestones and issues tracked for efficient collaboration.
  • Collaboration:
    • Each team member contributed to both front-end and back-end development.

Project team: Arne Flipts, Cédric Chau, Felix D’Hoore, Thorsten Mahieu
Time range: March - May 2023

Back to projects