Submitted 2 months ago

Personal Finance App - Created with NextJs

#next#shadcn#zod

Chamu•13,710

@ChamuMutezva

Preview site View code

This is a solution for...Personal finance app

HTML
CSS
JS

5guru

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Personal Finance Dashboard

Created using NextJs 14 and features several features which includes some of those listed below.
used Server actions and server components to fetch data from the database

Test Data

you can test using the following details

email: user@nextmail.com password: 123456

Pages

Landing Page

The general landing page that can be viewed on https://personal-finance-dashboard-two.vercel.app/. The page has a link element to the login form.

Login Page

users should login using an email and password to view the dashboard. Upon authentication the user will be directed to the Dashboard page. The link from the Landing page , will take you to the Login page where the url will be https://personal-finance-dashboard-two.vercel.app/login. The page has 3 options which you can follow:

Fill in with right credentials and press the Login button to proceed to the Dashboard page
If you have forgotten your credentials , use the forgot password option to recover your login details. This function is still under construction - hence it is work in progress.
Select the Signup button , so that you can submit your details.

Signup Page

Sign up with your username , email and password . These will be saved in the database - use them to Login in to the Dashboard

Forgot Password Page

Work in progress...

Dashboard Pages

The Dashboard has 5 pages and can only be viewed upon a successful authentication.

Features

Dark and Light Mode

with NextJs and Shadcn , adding the Dark mode theme is a walk in the park. This is well explained here nextjs dark mode

First , install next-themes with pnpm add next-themes
Create a theme provider
Wrap your root layout

Tables

used Shadcn Data table component and utilised TanStack Table for the logic, state and processing for UI elements and interactions. TanStack table has features that include sorting and filtering

Chart

another important component which comes with Shadcn is the Charts. The Chart in the Budget page was created using the Pie Chart from Shadcn with a little fix to bring it closer to the design.

Bugs

Dashboard not in sync with address bar on successful login

The issue I am facing is as follows: The project has a dashboard that can be viewed after authentication. The auth is working fine but probably the bug is somewhere there. When the correct details has been entered , you will be taken to the Dashboard page and that's ok. While the site has navigated to the Dashboard page, the address bar will still be pointing to http://localhost:3000/login instead of http://localhost:3000/dashboard

If I want to close the site with the close button on this instance, the site will not close - I guess this is because the address is pointing to the destination page - to close it , I need to navigate to other pages first.

Pages to look at for debugging:

Login-form.tsx - calls the server function authenticate - the form uses the server action method.
the authenticate function is in the action.ts file - lines 83 - 152
when the data is correct the createSession function is called from the session.ts file

// helper function for creating a new session
export async function createSession(userId: string) {
    const expires = new Date(Date.now() + 60 * 60 * 1000);
    const session = await encrypt({ userId, expires });

    cookies().set("session", session, {
        httpOnly: true,
        secure: true,
        expires: expires,
        sameSite: "lax",
        path: "/",
    });
    redirect("/dashboard");
}

at this point , i expect the address bar to have the correct path

Community feedback

P
markus•2,620
@markuslewinPosted 2 months ago
Hi!

I think it's line 106 that behaves unexpectedly. It doesn't seem to return a user, but throw a NEXT_REDIRECT. The rest of the code in the try block never runs.

It seems to work when I tell the signIn function to redirect to the dashboard:

await signIn("credentials", { redirectTo: "/dashboard", ...validatedFields.data, });
Marked as helpful
0
Lorand Kalmar•170
@Lorand98Posted about 2 months ago
Hello. Nice job! I'm mostly interested in how did you enable the caching? I realized that when I re-visit routes that have been loaded before (e.g. /transactions) they load almost instantly, so I suppose there's a caching implemented somewhere that I cannot find. I know that NextJS caching does not work with dynamic data by default (when the data is user specific for example). So I'm wondering how did you achieve this? I would like to achieve the same in my solution.
0
Chamu•13,710
@ChamuMutezvaPosted about 2 months ago
@Lorand98

Hi. See the following quorte from the docs and I have also provided a link to the docs page: Nextjs caching

"By default, Next.js will cache as much as possible to improve performance and reduce cost. This means routes are statically rendered and data requests are cached unless you opt out. The diagram below shows the default caching behavior: when a route is statically rendered at build time and when a static route is first visited."
0
Askat•100
@asanalievPosted 2 months ago
Hi Chamu,

Great job of Guru level!

I checked your solution on PulseLet (web app testing service), and don't see any issues with responsive design. Good quality!

However, there are some issues in the code (64 in total). For example: leftover commented out code and unused imports, accessibility issues, using array index as keys, etc.

Details can be found here: https://pulselet.com/projects/110.

Again - good job!

Cheers, Askat
0
Chamu•13,710
@ChamuMutezvaPosted 2 months ago
@asanaliev

Thank you for taking your time to review my project. I have also gone through the pulselet report - there are issues that I agree with and they are some which I don't agree with as stated below:

Do not use "Error" to declare a function - use another name. The error component is a built-in Nextjs component recommended for use by Nextjs team

Ambiguous spacing before next element span - what is supposed to be the fix here.

Use <img alt=...>, or <img alt=...> instead of the "img" role to ensure accessibility across all devices. This refers to some instances that I used a Piechart with a role of img. Definately the img element does not apply here.

when using Shadcn to create a component, it generates its own code and place it a dedicated folder for any other component that you may generate later. In my project most of these components are found in this folder components/ui/ . Most of these errors raised in this folder are somethings that I will have to play around with to make sure that nothing breaks in the Shadcn library
1
Askat•100
@asanalievPosted 2 months ago
Hi Chamu,

Thanks for reply!

Yes, totally agree that some rules might be ignored safely. They don't provide useful feedback. (We will be improving the knowledge base of the rules in future.)

Regarding "ambiguous spacing", I see your code uses className="sr-only" which should take care of proper spacing between elements. Probably, the issue here is just a warning, or even "false positive"; not critical.

Regarding "<img alt=...>", yes, agree. Seems it is more "false positive" in this case.

About Shadcn. We will add some type of "ignore this folder" to PulseLet in future. This should help in such cases.

Again, thanks a lot for your time and reviewing the report page. Continue building great projects!

-Askat
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord