{"id":28094763,"url":"https://github.com/makedonkatochevska/safe_blink","last_synced_at":"2026-05-18T00:02:54.250Z","repository":{"id":292804685,"uuid":"981985871","full_name":"makedonkatochevska/Safe_Blink","owner":"makedonkatochevska","description":"Safe Blink Web App","archived":false,"fork":false,"pushed_at":"2025-05-28T07:29:33.000Z","size":11569,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-08T06:33:36.243Z","etag":null,"topics":["javascript","sass","single-page-app","webapp"],"latest_commit_sha":null,"homepage":"https://safe-blink-makedonkatochevska.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/makedonkatochevska.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-12T07:52:06.000Z","updated_at":"2025-05-28T07:29:36.000Z","dependencies_parsed_at":"2025-08-08T06:32:37.365Z","dependency_job_id":null,"html_url":"https://github.com/makedonkatochevska/Safe_Blink","commit_stats":null,"previous_names":["makedonkatochevska/safe_blink"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/makedonkatochevska/Safe_Blink","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makedonkatochevska%2FSafe_Blink","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makedonkatochevska%2FSafe_Blink/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makedonkatochevska%2FSafe_Blink/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makedonkatochevska%2FSafe_Blink/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/makedonkatochevska","download_url":"https://codeload.github.com/makedonkatochevska/Safe_Blink/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makedonkatochevska%2FSafe_Blink/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33160167,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T22:39:12.733Z","status":"ssl_error","status_checked_at":"2026-05-17T22:39:10.741Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","sass","single-page-app","webapp"],"created_at":"2025-05-13T14:08:43.464Z","updated_at":"2026-05-18T00:02:49.241Z","avatar_url":"https://github.com/makedonkatochevska.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SafeWeb - Project2 - FrontEnd Academy\n\n## Table of Contents\n\n\u003cdetails\u003e\n  \u003csummary\u003eClick to expand\u003c/summary\u003e\n  - 📜 Project Description \u003cbr\u003e\n  - 📖  Project Purpose \u003cbr\u003e\n  - ✨ Features \u003cbr\u003e\n  - ⚙️  Tech Stack \u003cbr\u003e\n  - 🎥 Demo \u003cbr\u003e\n  - 📂 File Structure \u003cbr\u003e\n  - 🔨 Installation \u003cbr\u003e\n  - 🚀 Usage \u003cbr\u003e\n  - 💻 Development Process \u003cbr\u003e\n  - 📝 Credits \u003cbr\u003e\n  - 📞 Contact \u003cbr\u003e\n\u003c/details\u003e\n\n---\n\n## Project Description 📜\n\nThis is a fully responsive, custom-coded web application built to educate users on how to have a safe web experience. It's built with HTML, JavaScript, and Sass, and it mirrors the design provided in a Figma prototype (originally built for a 1920px screen, but responsive across all device sizes). The app includes a range of interactive and educational features like filters, discussions, profile settings, and login authentication using a Flask-based REST API.\n\n---\n\n## Project Purpose 📖\n\nThis project was created to showcase my skills in building a single-page web application from scratch, applying best practices in responsive design, custom styling with Sass, client-server communication using REST APIs, and managing user sessions with JavaScript. It replicates a real-world educational application both in functionality and UI/UX.\n\n---\n\n## Features ✨\n\n- 🔄 **Single Page Routing** using hash paths with smooth **fading animation transitions** between pages\n- ❌ **404 Error Page** with a Lottie animation when the user enters an invalid or unsupported route\n- 📱 **Fully responsive design** for all screen sizes, with a mobile-first approach:\n\n  - On mobile, filters are scrollable\n  - The lead-ins section is shown as a carousel\n  - The header becomes a dropdown hamburger menu, including login/logout options\n\n- 🔐 **Login Functionality**:\n\n  - Built with a Flask REST API running locally\n  - Supports three sets of credentials:\n    - `User123 / Pass123`\n    - `User456 / Pass456`\n    - `User789 / Pass789`\n  - Login input includes a show/hide password toggle\n  - Login button remains disabled unless both fields are filled\n  - Validation for incorrect credentials and server errors (shown via alert)\n  - After successful login, a “Добредојде!” overlay appears\n  - When logged in, a **logout** button is shown in the header (or in the hamburger menu on mobile)\n\n- 📺 **Home Page Video**:\n\n  - Initially shows a high-res image with a hover play icon\n  - Later swapped with a working video element using HTML `\u003cvideo\u003e` tag\n\n- 🎥 **\"Информирај се\" Page**:\n\n  - Contains 5 working filter buttons (pills)\n  - Videos are displayed based on the selected category\n  - Filter state is saved to session storage per user and persists across login/logout and page refreshes\n\n- 💬 **\"Табла за дискусии\" Page**:\n\n  - Displays hardcoded and user-added comments\n  - “See more” button expands additional discussions\n  - When the input is active, a send button appears\n  - If a user isn’t logged in and tries to post, they are redirected to the login page\n  - Logged-in users can post, and the discussion appears below with username and timestamp\n  - Each user’s posts are stored in session storage and persist after refresh\n\n- 👤 **\"Профил\" Page**:\n\n  - Users can change their email and birth year\n  - Data is stored in session based on the logged-in user\n  - Changes are persistent even after logout/login\n\n- 🎨 **Styling and UX**:\n\n  - Everything is styled with **custom Sass**\n  - Fixed header with scroll-based styling\n  - Hover effects, animations, and transitions for interactive elements\n  - Icons are pulled from Figma’s design system section\n\n- 🌐 **Routing Behavior**:\n  - Hash-based SPA navigation using `onhashchange`\n  - Only one page is visible at a time, no full reload\n  - Unknown routes display a fully styled 404 page\n\n---\n\n## Tech Stack ⚙️\n\n- ![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=flat-square\u0026logo=html5\u0026logoColor=white)\n- ![Sass](https://img.shields.io/badge/Sass-CC6699?style=flat-square\u0026logo=sass\u0026logoColor=white)\n- ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square\u0026logo=javascript\u0026logoColor=black)\n- ![Flask](https://img.shields.io/badge/Flask-000000?style=flat-square\u0026logo=flask\u0026logoColor=white)\n- ![Lottie](https://img.shields.io/badge/Lottie-00C1B5?style=flat-square\u0026logo=lottiefiles\u0026logoColor=white)\n- ![Session Storage](https://img.shields.io/badge/Session--Storage-3F3F3F?style=flat-square\u0026logo=googlechrome\u0026logoColor=white)\n- ![Git](https://img.shields.io/badge/Git-F05032?style=flat-square\u0026logo=git\u0026logoColor=white)\n\n---\n\n## Demo 🎥\n\nCheck out the pictures below for a quick preview of the core features:\n\n\u003ca href=\"https://i.imghippo.com/files/fpdE7623i.png\" target=\"_blank\"\u003eHome Page\u003c/a\u003e\n\u003cbr\u003e\n\u003ca href=\"https://i.imghippo.com/files/msJy6489tSo.png\" target=\"_blank\"\u003eProfile Page\u003c/a\u003e\n\u003cbr\u003e\n\u003ca href=\"https://i.imghippo.com/files/Gx8412pjs.png\" target=\"_blank\"\u003eContact Page\u003c/a\u003e\n\u003cbr\u003e\n\u003ca href=\"https://i.imghippo.com/files/kLG8772lsM.png\" target=\"_blank\"\u003eDiscussion Page\u003c/a\u003e\n\u003cbr\u003e\n\u003ca href=\"https://i.imghippo.com/files/STMB1613nY.png\" target=\"_blank\"\u003eInfo Page\u003c/a\u003e\n\u003cbr\u003e\n\u003ca href=\"https://i.imghippo.com/files/CPbi6365Nw.png\" target=\"_blank\"\u003eLog In Page\u003c/a\u003e\n\u003cbr\u003e\n\u003ca href=\"https://i.imghippo.com/files/GJur6211lls.png\" target=\"_blank\"\u003eInfo Page PopUp\u003c/a\u003e\n\u003cbr\u003e\n\u003ca href=\"https://i.imghippo.com/files/OaP5205mac.png\" target=\"_blank\"\u003e404 Page\u003c/a\u003e\n\n## File Structure 📂\n\n- **assets/**: Contains all images and icons used in the application.\n- **css/**: Contains the SCSS stylesheet, including styles for the entire application.\n- **js/**: Holds JavaScript files for core functionality, including routing and page transitions.\n- **REST API/**: The backend folder with the Flask API for authentication.\n- **index.html**: The main HTML file for the app.\n\n---\n\n## Installation 🔨\n\nThe REST API is already included in the repository under the `/REST API` folder. To run it locally, follow these steps:\n\n### Steps to Install\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/makedonkatochevska/Safe_Blink.git .\n   ```\n2. Set up the Flask REST API:\n   Make sure you have **Python 3.12.3** or later installed on your system. You can download it from the official [Python website](https://www.python.org/downloads/).\n   Then, Open your terminal or command prompt, navigate to the `REST API` folder inside the project directory:\n   ```bash\n   cd \"REST API\"\n   ```\n3. Install the required Python packages:\n   ```bash\n   pip install flask\n   pip install  flask_cors\n   ```\n4. Run the API:\n   ```bash\n   python '.\\REST API\\authenticator.py'\n   ```\n5. If everything works correctly, you should see a message in the terminal indicating that the Flask server is running on http://127.0.0.1.5500.\n\n---\n\n## Usage 🚀\n\nOnce set up, you can access the project through your local browser. You can interact with the page's features, such as:\n\n- Navigate between pages\n- Log in using one of the predefined credentials:\n  - `User123 / Pass123`\n  - `User456 / Pass456`\n  - `User789 / Pass789`\n- Explore the features:\n  - 🧠 Filter educational videos in **\"Информирај се\"** (filters are saved per user)\n  - 💬 Post and view discussions in **\"Дискусии\"** (available only for logged-in users)\n  - 👤 Access the **Profile page** to view or change your email and birth year (data persists per user)\n- Enjoy:\n  - ✨ Smooth fade animations on page transitions\n  - 📱 Fully responsive layout with a carousel for lead-ins and scrollable filters on mobile\n  - 🔐 Secure login logic with form validation and REST API integration\n  - 🎞️ Interactive videos and playful **Lottie animations**, including a custom 404 page\n\n---\n\n## Development Process 💻\n\nThe project was developed with a strong focus on UI/UX, responsiveness, and user interaction. Here's a breakdown of the steps followed during development:\n\n1. **📐 Figma Review \u0026 Planning**\n\n   - Studied the full design in Figma for both desktop (1920px) and mobile views.\n   - Noted page structure, layout, icons, and interaction behaviors.\n   - Identified reusable components, navigation logic, and assets.\n\n2. **🧱 UI Implementation**\n\n   - Fully custom codebase using **HTML5**, **Sass (SCSS)**, and **Vanilla JavaScript**.\n   - Header, sections, and components were built to match the exact Figma design.\n   - Responsive layout with a mobile-first approach, using media queries and mobile-friendly elements (carousel, scrollable filters).\n\n3. **🔁 Page Routing \u0026 State**\n\n   - Implemented single-page routing using `location.hash` and `onhashchange` event.\n   - Introduced a fade transition animation when switching routes.\n   - If a non-existent hash path is visited, a custom 404 page with a **Lottie animation** is shown.\n\n4. **🔒 Authentication**\n\n   - A simple **Flask REST API** is bundled with the project and used for login validation.\n   - Login form includes:\n     - Toggle show/hide password\n     - Validation to enable the button only when both fields are filled\n     - Error handling for invalid credentials or server issues\n   - On successful login, a \"Добредојде!\" overlay is displayed.\n   - Login state is stored in **Session Storage**, enabling persistent filters and posts.\n\n5. **🔧 Features Based on Auth State**\n\n   - Only logged-in users can:\n     - Post comments in the **\"Дискусии\"** section.\n     - Edit email and birth year in the **Profile page**.\n   - New posts appear instantly and persist after refresh using session storage.\n   - Filters in **\"Информирај се\"** are saved per user and persist between sessions.\n\n6. **🧪 Testing \u0026 Refinement**\n   - Manually tested across devices and screen sizes to ensure responsiveness.\n   - Ensured logic for login/logout, route handling, state management, and animations works as intended.\n\nThis entire flow supports a fully functional UI prototype simulating a real-world secure browsing awareness platform.\n\n---\n\n## Credits 📝\n\n- **Design**: The design for this project was provided by **Brainster**.\n- **Icons**: Icons used throughout the application are from the **Figma Design System** and **Font Awesome**.\n- **Animations**: Lottie animations were used to enhance user experience, including the 404 page animation.\n- **Flask REST API**: The backend authentication API was built using **Flask**.\n- **Mentors \u0026 Resources**: Special thanks to the instructors at **Brainster Academy** for their guidance and knowledge.\n- **Third-Party Libraries**:\n  - **Sass** for efficient styling.\n  - **JavaScript** for frontend logic.\n  - **Flask** for authentication.\n  - **Lottie** for interactive animations.\n\n---\n\n## Contact 📞\n\n📫 You can reach me through email at [makedonkatochevska@gmail.com](mailto:makedonkatochevska@gmail.com)\nor\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?logo=linkedin\u0026logoColor=white)](https://linkedin.com/in/makedonka-tochevska)\n[![Static Badge](https://img.shields.io/badge/GitHub-white?style=flat\u0026logo=github\u0026logoColor=black\u0026logoSize=auto\u0026labelColor=white\u0026color=white\u0026cacheSeconds=3600\u0026link=https%3A%2F%2Fgithub.com%2Fmakedonkatochevska)](https://github.com/makedonkatochevska)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakedonkatochevska%2Fsafe_blink","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmakedonkatochevska%2Fsafe_blink","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakedonkatochevska%2Fsafe_blink/lists"}