Incident Counter Web App
For
Table Of Contents
- Description
- Tools
- Figma
- Next.js
- Typescript
- Firebase
- Code Structure
- Folder Structure
- App Flow
- Style
- Colors
- Fonts
- Css
- Wireframes
- Desktop Screens
- Mobile Screens
- Icons
- UI elements
- Source Links
- Loading Screen
- Thank You
1. App Description
Incident Counter
Web App
Days Without Incident is a web application initially developed for Nik’s, a Swedish chocolate company, to promote safety and track incident-free days in the workplace. The primary function of the app is to log and display the number of consecutive days without any incidents or accidents, helping teams celebrate safety milestones and monitor progress. Beyond tracking incidents, Days Without Incident offers robust management features. Users can organize and oversee departments, employees, and incidents in one centralized platform. This makes it a valuable tool not only for safety tracking but also for maintaining an organized record of activities, ensuring a safer, more efficient work environment.
1. Tolls
Tools Used
Figma
In addition to building the app, I used Figma to design its layout and user interface. Figma allowed me to plan and visualize the app’s structure before coding, ensuring a smoother development process. As someone who values good design, it was essential to create a user-friendly and intuitive interface, and Figma made it easy to experiment with different layouts and elements. This design foundation helped guide the development of the app, ensuring both functionality and aesthetics were aligned from the start.
Next.js
While I could have easily built this using React, I deliberately chose Next.js to expand my skills in a more structured and feature-rich environment. Next.js not only simplifies creating dynamic routes but also enhances the flexibility of layouts, making it an ideal framework for complex applications. Additionally, its built-in optimizations, such as server-side rendering (SSR) and static site generation (SSG), provide significant performance benefits. I’m enjoying the challenge of leveraging Next.js’s powerful features, which goes beyond what I could achieve with React alone.
Typescript
I decided to use TypeScript for this project, even though I’m still a beginner with it. While it was challenging at first, especially in setting up types for Firestore data and managing type safety, it has been a great learning experience. TypeScript’s strong typing system helped me catch errors early and define clear data structures for departments, accidents, and employees. Despite the initial difficulty, using TypeScript ultimately made the app more reliable and maintainable, and I’m excited to continue improving my skills with it.
Firebase
I chose Firebase for its versatile backend services, particularly Authentication, Firestore, and Storage. Firebase Authentication made it easy to set up secure user login, while Firestore provided a flexible structure for managing data like departments, accidents, and employee details. Firebase Storage was also ideal for handling employee images, allowing for secure and efficient media storage and retrieval. This combination streamlined both data and media management, enabling me to focus on building core features.
1. Code Stracture
Developer guidelines
Counter
DashBoard
Authoriziation
Departments
Employees
Employees
Folder Stracture
App Flow
