TabVista - Personal New Tab

Personal Dashboard Web App

Welcome to my personal dashboard web app, a simple yet engaging layout designed and developed by a passionate junior front-end web developer. This project showcases a well-structured dashboard with multiple blocks and a responsive design.

Features

• A clock display in the center of the viewport
• A personalized greeting mantra
• Weather indicator at the top right corner
• Todo list menu at the top left corner
• Background image details at the bottom left corner

Built With

This project was built using the Vite Vanilla JS Template, which includes:

• Vite: A next-generation frontend build tool.
• ESLint: For maintaining a consistent code style.
• Prettier: For enforcing a consistent style across the project.
• And other useful development tools and plugins.

Installation

To get started with this project, follow these steps:

1. Clone the repository:

git clone https://github.com/MarwanShehata/TabVista.git

2. Navigate to the project folder and install dependencies:

cd TabVista
npm install
npm install vite

Post-Installation Steps

After installation, please consider addressing the following areas for improvement:

1. Make the app responsive on small width viewports.
2. Enhance the UI of the todo list and the starter input form.
3. Optimize the bottom left component to render after retrieving data from the API.
4. Investigate and resolve the weather icon issue on Chrome.
5. Fix ESLint issues.
6. Divide different components into multiple JS and CSS modules.

Scripts

Use the following scripts for your development workflow:

# Start the development server
npm run dev

# Check for linting errors
npm run lint

# Fix linting errors
npm run lint:fix

# Format code using Prettier
npm run format

# Build for production
npm run build

# Preview the build
npm run preview

# Build and preview the project
npm run buildpreview

Join me on this exciting journey as we refine this project and take it to new heights!