Sportify

Sportify is a dummy website created to showcase responsive design and advanced front-end techniques. While it doesn’t offer real functionality, it serves as a practical project for applying HTML, CSS, and advanced Sass skills.

Explore the live project here: Sportify.

Project Overview

Sportify is designed to simulate a platform where users can discover and track sports and events in their local area. Though it's a static site, it demonstrates a solid foundation in responsive design and modern CSS practices.

Key Features

• Dummy Functionality: The site is static and doesn't include real functionality.
• Advanced Sass: Utilizes features such as variables, mixins, and the 7-1 architecture for organized styling.
• Responsive Design: Adapts seamlessly across desktop, tablet, and mobile devices.
• Custom SVG Icons: Created with Adobe Illustrator and sourced from Flaticon for enhanced visual appeal.
• Progressive Web App (PWA): Installable on devices for offline access and an app-like experience.
• UI Design in Figma: Crafted in Figma with inspiration from Pinterest and Dribbble. View the design here.

Tools and Technologies

• HTML5 & CSS3: Core technologies for structuring and styling the site.
• Advanced Sass: Employs modularization and the 7-1 architecture for CSS organization.
• Flaticon & Adobe Illustrator: Used for creating custom SVG icons.
• Figma: For UI design, inspired by leading design platforms.
• CSS Grid & Flexbox: Techniques for responsive and flexible layout design.
• Progressive Web App (PWA): Provides offline functionality and an enhanced user experience.

Roadmap Context

This project is part of a learning roadmap aimed at mastering full-stack development. Sportify showcases the application of HTML, CSS, advanced Sass, and other web development tools, forming a foundation for more complex projects.

Additional Information

• NPM Scripts: Used for compiling Sass and managing SVG sprites.
• No Backend: This site is a front-end practice project without backend or real-time data processing.
• PWA: Designed for offline functionality and an app-like user experience.

Challenges

• Implemented a responsive layout using CSS Grid, Flexbox, and media queries.
• Organized styles with the 7-1 Sass architecture.
• Enabled Progressive Web App (PWA) installability.
• Add real functionality in the future.

Issues Faced

1. Meta Tags for Social Media Sharing: Encountered issues with displaying the web image in shared links and social posts. Despite using the correct Open Graph and Twitter Card meta tags, images are not showing.

   • Resolution: The issue was caused by using relative paths for the image URLs. Switching to absolute URLs for the og:image and twitter:image meta tags resolved the problem.

2. JavaScript Functionality: Initially had limited experience with JavaScript, which made implementing certain features challenging.

   • Resolution: Used ChatGPT to generate JavaScript functionalities and gained valuable experience through practice.

Note: All JavaScript functionalities were generated with the assistance of ChatGPT under specific instructions.