GithubHelp home page GithubHelp logo

appstore-moc's Introduction

I'm Tannaz 👋

I'm an Astronomical Physics graduate from Iran who found passion in the world of digital marketing and then web development. A mini blogger on Instagram with 4 years of work experience as an SEO Specialist & Social Media Specialist in multiple industries in Iran and Armenia.

Recently, I completed a Fullstack Development Bootcamp at Mind-Mingle, in Utrecht, focusing on Javascript, Typescript, Nodejs, React, and Express. We also learned how to manage a database on Prisma, and used Tailwind and ShadCN for styling, plus making our way around the Zod library for form validation. I'm chasing growth, learning from my mistakes, and looking for opportunities to use this valuable skill set. From SEO specialism to Full Stack Development, I'm here to make a difference!

Languages and Tools:

                                   

My Portfolio: Spend Smart App

Spend Smart is a comprehensive and interactive expense manager that helps you not just track and manage your income and expenses, but predicts your balance based on the income and expenses you have. Users can create independent accounts (cash, bank account, common account,...) to see the balance individually based on the incomes and expenses that the user added to the specific account. It shows user how much money they have to spend and throws a warning on all pages.

In this application, you can create multiple incomes and expenses across a wide variety of categories. You can even create unique categories for income and expense. Spend Smart helps you visualize your financial habits with beautiful bar, line, and pie charts as well as detailed views of each income or expense.

Tech Stack

The project uses a combination of technologies for an optimized and user-friendly experience.

  • Frontend: React (for building user interface), Next.js (for server-side rendering)
  • Backend: Express.js (for handling requests, routing, and APIs), Node.js (runtime environment)
  • Database: SQLite with Prisma ORM (Object-Relational Mapping)
  • Visualizations: Recharts library for visualization line, pie, and bar charts

Features

Incomes and Expenses

  • Create numerous income and expenses entries
  • Create new categories for incomes and expenses
  • Add incomes and expenses according to created categories
  • Create individual accounts
  • Show balance for every account independently

Data Visualization

  • Visualize incomes and expenses in Bar and Pie Charts
  • A detailed view of each income and expense entry
  • Apply filters to entries based on the date

Details Page for expense/income

  • Line chart based on the income or expense over time
  • Access comprehensive information about each income or expense

Customizability

  • Switch between different theme colors (Red, Green, Purple & Blue)
  • Opt for a dark theme for enhanced usability in low-light conditions

This application can help anyone keep a close watch on where their money is going and coming from, making it an excellent tool for financial management and planning.

The project is open-source and contributions are always welcomed. Live demo: Spend Smart App

Contact me

Scrolled through my portfolio? Enjoyed it? Great! Now, drop me an email or find me on LinkedIn.

     

appstore-moc's People

Contributors

tannazma avatar

appstore-moc's Issues

Use same casing for naming classes

Appstore-moc/index.html

Lines 19 to 31 in 22540ac

<div style="flex:1" class="Menu">
<div class="searchbar">
<img class="search" src="search.svg" />
<input class="searchInput" placeholder="Search" />
</div>
</div>
<div class="User">
<div class="User-avatar"></div>
<div id="User-name"></div>
</div>
</aside>
<div class="main-content">
<div class="overlay">

As seen in snippet below, some class names are written in PascalCase manner, some are in CamelCase and some are kebak-cased. Unify them all so the handwriting is persistent

Unnecessary extra div element

Appstore-moc/styles.css

Lines 41 to 45 in 22540ac

.text {
color: rgb(50, 49, 49);
font-size: 18px;
text-align: center;
}

Looking at this .text style and its corresponding element, I noticed this is unnecessary. The div.text element can be completely removed and the styles can be given to parent (.overlay)

unnecessary font-properties

Appstore-moc/styles.css

Lines 10 to 19 in 22540ac

aside {
background-color: rgb(216, 193, 216);
width: 200px;
display: flex;
flex-direction: column;
font-family: sans-serif;
font-size: 15px;
font-style: inherit;
padding-top: 10px;
}

Most of font-properties mentioned here are automatically inherited from parent.

Experiment with them, and remove the ones which are unnecessary

Repository description is missing

Every other of your repositories has a description stating what is the repository about, except this one. I can't understand the purpose of it at a glance

image

`.Menu span` does not indicate what it refers to

Appstore-moc/styles.css

Lines 95 to 98 in 22540ac

.Menu span {
color: rgb(43, 41, 174);
margin-right: 5px;
}

Using .Menu span here does not tell the code reader what does it refer to. I'd recommend using a class name with a descriptive name for the span (which is the icon element).

Also this color here is leftover. YOu can safely remove it

Unnecessary styles in main-content

Appstore-moc/styles.css

Lines 21 to 30 in 22540ac

.main-content {
font-family: sans-serif;
padding-left: 30px;
padding-right: 30px;
position: relative;
height: 100vh;
overflow: auto;
overflow-x: hidden;
}

Most of styles here are no-op.

Experiment with them and remove the unnecessary ones (along with that extra blank line)

Also the height seems repititive/unnecessary. THe body has height: 100vh and main-content has it too. Probably only one of them required it

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.