/expenses_tracker

Developed with Next.js and leveraging its server-side rendering capabilities, the Expense Tracker App can manage your money. With this app you can see all your money. Here you can fixed a budget and expense according to your budget.

Primary LanguageJavaScript

Sahreen Expense Tracker App

📋 Table of Contents

  1. 🤖 Introduction
  2. ⚙️ Tech Stack
  3. 🔋 Features
  4. 🤸 Quick Start
  5. 🕸️ Snippets
  6. 🔗 Links
  7. 🚀 More

🤖 Introduction

Developed with Next.js and leveraging its server-side rendering capabilities, the Expense Tracker App can manage your money. With this app you can see all your money. Here you can fixed a budget and expense according to your budget.

⚙️ Tech Stack

🔋 Features

👉 Home Page: Showcases a visually appealing display of budgets and expenses providing a captivating introduction to the diverse range of services available.

👉 Exploration and Filtering: Explore a wide variety of services from around the world, utilizing a search and filter system based on criteria such as types

👉 Transition to Server-Side Rendering: A seamless transition from client-side rendering to server-side rendering, enhancing performance and providing a smoother browsing experience.

👉 Pagination: For easy navigation through a large dataset of services, allowing users to explore multiple pages effortlessly.

👉 Metadata Optimization and SEO: Optimize metadata for car listing, enhancing search engine optimization (SEO) and ensuring better visibility on search engine results pages.

👉 Responsive Website Design: The website is designed to be visually pleasing and responsive, ensuring an optimal user experience across various devices.

and many more, including code architecture and reusability

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

Cloning the Repository

git clone "https://github.com/sumon0002001/expenses_tracker"
cd expenses_tracker

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= CLERK_SECRET_KEY=

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/ NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/


Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on the corresponding websites.

**Running the Project**

```bash
npm run dev

Open http://localhost:3000 in your browser to view the project for frontend.

Open https://local.drizzle.studio/ in your browser to view the database .

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");

@tailwind base; @tailwind components; @tailwind utilities;

  • { margin: 0; padding: 0; box-sizing: border-box; font-family: "Manrope", sans-serif; }

/* START: General styles */ .max-width { @apply max-w-[1440px] mx-auto; }

.padding-x { @apply sm:px-16 px-6; }

.padding-y { @apply py-4; }

.flex-center { @apply flex items-center justify-center; }

.flex-between { @apply flex justify-between items-center; }

.custom-btn { @apply flex flex-row relative justify-center items-center py-3 px-6 outline-none; } /* END: General styles */

/* START: Hero styles */ .hero { @apply flex xl:flex-row flex-col gap-5 relative z-0 max-w-[1440px] mx-auto; }

.hero__title { @apply 2xl:text-[72px] sm:text-[64px] text-[50px] font-extrabold; }

.hero__subtitle { @apply text-[27px] text-black-100 font-light mt-5; }

.hero__image-container { @apply xl:flex-[1.5] flex justify-end items-end w-full xl:h-screen; }

.hero__image { @apply relative xl:w-full w-[90%] xl:h-full h-[590px] z-0; }

.hero__image-overlay { @apply absolute xl:-top-24 xl:-right-1/2 -right-1/4 bg-hero-bg bg-repeat-round -z-10 w-full xl:h-screen h-[590px] overflow-hidden; } /* END: Hero styles */

/* START: Home styles */

.home__text-container { @apply flex flex-col items-start justify-start gap-y-2.5 text-black-100; }

.home__filters { @apply mt-12 w-full flex-between items-center flex-wrap gap-5; }

.home__filter-container { @apply flex justify-start flex-wrap items-center gap-2; }

.home__cars-wrapper { @apply grid 2xl:grid-cols-4 xl:grid-cols-3 md:grid-cols-2 grid-cols-1 w-full gap-8 pt-14; }

.home__error-container { @apply mt-16 flex justify-center items-center flex-col gap-2; } /* END: Home styles */

/* START: Car Card styles */ .car-card { @apply flex flex-col p-6 justify-center items-start text-black-100 bg-primary-blue-100 hover:bg-white hover:shadow-md rounded-3xl; }

.car-card__content { @apply w-full flex justify-between items-start gap-2; }

.car-card__content-title { @apply text-[22px] leading-[26px] font-bold capitalize; }

.car-card__price { @apply flex mt-6 text-[32px] leading-[38px] font-extrabold; }

.car-card__price-dollar { @apply self-start text-[14px] leading-[17px] font-semibold; }

.car-card__price-day { @apply self-end text-[14px] leading-[17px] font-medium; }

.car-card__image { @apply relative w-full h-40 my-3 object-contain; }

.car-card__icon-container { @apply flex group-hover:invisible w-full justify-between text-grey; }

.car-card__icon { @apply flex flex-col justify-center items-center gap-2; }

.car-card__icon-text { @apply text-[14px] leading-[17px]; }

.car-card__btn-container { @apply hidden group-hover:flex absolute bottom-0 w-full z-10; } /* END: Car Card styles */

/* START: Car Details styles */ .car-details__dialog-panel { @apply relative w-full max-w-lg max-h-[90vh] overflow-y-auto transform rounded-2xl bg-white p-6 text-left shadow-xl transition-all flex flex-col gap-5; }

.car-details__close-btn { @apply absolute top-2 right-2 z-10 w-fit p-2 bg-primary-blue-100 rounded-full; }

.car-details__main-image { @apply relative w-full h-40 bg-pattern bg-cover bg-center rounded-lg; } /* END: Car Details styles */

/* START: Custom Filter styles */ .custom-filter__btn { @apply relative w-full min-w-[127px] flex justify-between items-center cursor-default rounded-lg bg-white py-2 px-3 text-left shadow-md sm:text-sm border; }

.custom-filter__options { @apply absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm; } /* END: Custom Filter styles */

/* START: Footer styles */ .footer { @apply flex flex-col text-black-100 mt-5 border-t border-gray-100; }

.footer__links-container { @apply flex max-md:flex-col flex-wrap justify-between gap-5 sm:px-16 px-6 py-10; }

.footer__rights { @apply flex flex-col justify-start items-start gap-6; }

.footer__links { @apply flex-1 w-full flex md:justify-end flex-wrap max-md:mt-10 gap-20; }

.footer__link { @apply flex flex-col gap-6 text-base min-w-[170px]; }

.footer__copyrights { @apply flex justify-between items-center flex-wrap mt-10 border-t border-gray-100 sm:px-16 px-6 py-10; }

.footer__copyrights-link { @apply flex-1 flex sm:justify-end justify-center max-sm:mt-4 gap-10; } /* END: Footer styles */

/* START: searchbar styles */ .searchbar { @apply flex items-center justify-start max-sm:flex-col w-full relative max-sm:gap-4 max-w-3xl; }

.searchbar__item { @apply flex-1 max-sm:w-full flex justify-start items-center relative; }

.searchbar__input { @apply w-full h-[48px] pl-12 p-4 bg-light-white rounded-r-full max-sm:rounded-full outline-none cursor-pointer text-sm; } /* END: searchbar styles */

/* START: search manufacturer styles */ .search-manufacturer { @apply flex-1 max-sm:w-full flex justify-start items-center; }

.search-manufacturer__input { @apply w-full h-[48px] pl-12 p-4 rounded-l-full max-sm:rounded-full bg-light-white outline-none cursor-pointer text-sm; }

.search-manufacturer__options { @apply absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm; }

.search-manufacturer__option { @apply cursor-default select-none py-2 pl-10 pr-4; } /* END: search manufacturer styles */





   
  
<br />
<br />