Dashboard

oladokun-o

An interactive and dynamic dashboard built with Svelte, designed to monitor and manage key metrics, transactions, and revenue in real time. It integrates with a backend for seamless data updates and displays.

#frontend #svelte #svetekit

Demo Download

Megaexe Screening Test Web Application Frontend

This repository contains the frontend code for the Megaexe Screening Test Web Application. It was developed using SvelteKit to implement the provided UI design and consume APIs from the Payload CMS backend.

Features

UI Implementation
- Replicated the Figma design, ensuring pixel-perfect layouts using the provided assets, fonts, and colors.
- Implemented responsiveness for mobile, tablet, and desktop views.
API Consumption
- Integrated with the Payload CMS backend to dynamically fetch and render content.
Navigation
- Single-page and multi-page capabilities, as required by the project.
Resposive
- The web app is responsive and works well on mobile, tablet, and desktop.
Performance
- Optimized for fast loading and smooth transitions.

Challenges

API Integration
- Problem Understanding the API response structure and integrating it into the frontend.
- Solution Studied the API documentation and experimented with different data structures to render the content correctly.
Responsiveness
- Problem No mobile design was provided in the Figma file.
- Solution Implemented a responsive design based on the desktop design and tested on different devices to ensure compatibility.
Media Files Failing in Production
- Problem Images were not loading via the URL in production.
- Solution Reverted to using the local images in the assets folder (temporary solution).

Setup Instructions

Clone the repository:

git clone https://github.com/oladokun-o/dashboard.git
cd dashboard

Install dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```
Build for production:
```
npm run build
```
Preview production build:
```
npm run preview
```
Login Credentials

To test the application, use the following credentials:

Admin Account

Email: [email protected]
Password: TGidm62k@tbwiAn

Deployment

The frontend is deployed on [Deployment Platform] and accessible at:
Production Frontend URL

Tools and Technologies

SvelteKit: For building the application.
Vite: For development and production builds.
CSS: For styling.
Deployment Platform: Netliify.

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing