AnxiousNewbie in need of advices for First Complex project -PDF/Invoicing/Database
Unanswered
Jack Russell Terrier posted this in #help-forum
Jack Russell TerrierOP
Hello, I need some advice. I'm a self-taught novice programmer, and I'd like to simplify my brother's work. He has a small business with 2 employees. I'd like to develop a website for him using Next.js with Supabase. It won't be a public application. Could you please advise me on what other technologies I should use and what to be careful about? Description of the application:
2 types of accounts - employee and owner
Employee:
They should be able to record hours worked for each working day and view the history of worked hours. Also, submit hours for approval to the owner. At the end of the month, generate an invoice that can be downloaded in PDF format.
Owner:
Needs to see the worked hours of all employees and approve them. Needs to see issued invoices and also download them.
For PDF generation, I was considering:React-pdf/renderer
Do I need Redux for my application?
This is my first more complex project outside of Udemy projects, so I would be really grateful if you could advise me. It will be a hobby project that will help and also teach me something, I'm just a little stressed :D. I'll be extremely thankful for all advice, recommendations, and even criticism.
Thank you.
2 types of accounts - employee and owner
Employee:
They should be able to record hours worked for each working day and view the history of worked hours. Also, submit hours for approval to the owner. At the end of the month, generate an invoice that can be downloaded in PDF format.
Owner:
Needs to see the worked hours of all employees and approve them. Needs to see issued invoices and also download them.
For PDF generation, I was considering:React-pdf/renderer
Do I need Redux for my application?
This is my first more complex project outside of Udemy projects, so I would be really grateful if you could advise me. It will be a hobby project that will help and also teach me something, I'm just a little stressed :D. I'll be extremely thankful for all advice, recommendations, and even criticism.
Thank you.
48 Replies
Brown bear
React-pdf/renderer - should be alright for invoices, the problem i saw was that instead of importing you have to tweak it for dynamic import on load with 'use client'.
I would use Redux personally insted of Context hook for your app.
The most important advice is carefully think about database, data needed and how would they work together.
I would use Redux personally insted of Context hook for your app.
The most important advice is carefully think about database, data needed and how would they work together.
American Crow
You do want to code this mainly as an exercise, right?
Because if it's just to help your brother, the requirements you listed there are plenty of apps which can do that. If its a simple buy or build decision your case is always a buy from what i read here
Because if it's just to help your brother, the requirements you listed there are plenty of apps which can do that. If its a simple buy or build decision your case is always a buy from what i read here
Jack Russell TerrierOP
I would say i want to practice and also help him :). He just made the company and he is short on money. So free tiers would be awesome and im student so i got time to practice. I want to do it well, thats why im asking for little guidance.
American Crow
Yea all good i am just trying to give an important perspective many software developers tend to forget.
For the project.
I dont know about Redux. Don't really see why you'd need a lot of global state in that kind of app and therefore a global state manager at all. Plus it's most likely not the make or break of your project. While programming if you find yourself needing global state once. Go with context. If you find yourself needing global state over and over again introduce a state manager. It should be considered a tool to make it easier for you, as a developer.
Start with the architecture. Open up Excalidraw or any other drawing tool and draw out your architecture. Meaning Frontend, Backend, Database. Fit it User Permissions and User Roles. Draw arrows for communction etc. Same thing for the database model draw it. That way others can help you if you share your drawings here or elsewhere. Also you'll gain a good understanding in the process. You'll have to google stuff you not sure about etc.
For the project.
I dont know about Redux. Don't really see why you'd need a lot of global state in that kind of app and therefore a global state manager at all. Plus it's most likely not the make or break of your project. While programming if you find yourself needing global state once. Go with context. If you find yourself needing global state over and over again introduce a state manager. It should be considered a tool to make it easier for you, as a developer.
Start with the architecture. Open up Excalidraw or any other drawing tool and draw out your architecture. Meaning Frontend, Backend, Database. Fit it User Permissions and User Roles. Draw arrows for communction etc. Same thing for the database model draw it. That way others can help you if you share your drawings here or elsewhere. Also you'll gain a good understanding in the process. You'll have to google stuff you not sure about etc.
Jack Russell TerrierOP
@American Crow so in Context do you recommend to fetch whole database once and then manipulate data in components ?
I want to use Next as frontend and supabase as backend/databse.
In context i would specify which user is fetching and on that i would specify fetch url, right ?:D
Sorry if i have stupid questions
I want to use Next as frontend and supabase as backend/databse.
In context i would specify which user is fetching and on that i would specify fetch url, right ?:D
Sorry if i have stupid questions
Brown bear
I would say that redux is easier if you got multiple components where you dont have to use 20 props between components. But Context should also okay for small app.
American Crow
Actually it's a very good question. You'll have to read some documentation. This contains all the patterns you described as well as best pratcies and "the NextJS way to do exactly what you described.
https://nextjs.org/docs/app/building-your-application/data-fetching/patterns
From the docs:
"If you need to use the same data (e.g. current user) in multiple components in a tree, you do not have to fetch data globally, nor forward props between components. Instead, you can use fetch or React cache in the component that needs the data without worrying about the performance implications of making multiple requests for the same data."
Highly recommend reading that whole page very carefully and understand it. Mabye do some mock project to test the things you read there. You'll have to adopt the NextJS mental model of data fetching.
https://nextjs.org/docs/app/building-your-application/data-fetching/patterns
From the docs:
"If you need to use the same data (e.g. current user) in multiple components in a tree, you do not have to fetch data globally, nor forward props between components. Instead, you can use fetch or React cache in the component that needs the data without worrying about the performance implications of making multiple requests for the same data."
Highly recommend reading that whole page very carefully and understand it. Mabye do some mock project to test the things you read there. You'll have to adopt the NextJS mental model of data fetching.
American Crow
I know it's tedious and i am not directly answering your questions. However it's the only way to gain a solid understanding. Put the research work in. It will take time first but save a lot of time in the long run
Jack Russell TerrierOP
I do understand that fetches are memoized, but im lost in practise.
So practically, because of memoization, i can make fetch component, call it everywhere where i need that data - will call it only once and i modify the data as i need them in another components, correct ?
Would it in practise be better then proping data?
So practically, because of memoization, i can make fetch component, call it everywhere where i need that data - will call it only once and i modify the data as i need them in another components, correct ?
Would it in practise be better then proping data?
American Crow
You should always aim for
1. Fetching data where it's needed
and
2. Whenever possible, we recommend fetching data on the server with Server Components.
(This is copied from the same docs again)
That means in general the most LEAF (think of a Tree) Server Component. Should to the fetch the data. You might prop drill that data one or two levels down to a Client Component below that.
If you find yourself prop drilling the feteched data 7 levels deep you are doing something wrong. You should rather fetcht the data more closley to where its needed.
1. Fetching data where it's needed
and
2. Whenever possible, we recommend fetching data on the server with Server Components.
(This is copied from the same docs again)
That means in general the most LEAF (think of a Tree) Server Component. Should to the fetch the data. You might prop drill that data one or two levels down to a Client Component below that.
If you find yourself prop drilling the feteched data 7 levels deep you are doing something wrong. You should rather fetcht the data more closley to where its needed.
Jack Russell TerrierOP
Thank you :). Soooo, do i even need context ? 😄
American Crow
That is what i was saying
most likely not
Jack Russell TerrierOP
Sorry hah 😄
American Crow
thats why i told you to draw it
draw the server and client components
Jack Russell TerrierOP
Its first complex project and im totally lost 😄
Going to do it 😄
American Crow
inside the server components pseudo code the fetches
pass the data down to client component
the client component does some pdf stuff
but draw it
Jack Russell TerrierOP
Thank you, now i understand much better 🙂
American Crow
you welcome
Jack Russell TerrierOP
Do you have some another advice of which you can think i will need it later on ?
American Crow
You won't like that too much. But read the entire NextJS Docs. When you go to bed or need a break from coding. The information from that one page alone gave you a big boost in understanding. Other pages are well written too. You just have to read over it for the first time. While coding you might remember "hey something like that was in the docs" and you can go back to it. I know its not as cool and exciting as coding but its a must
Personally i read those docs just the Next App Router docs like 20 times and i still have them open all the time and still don't understand half of it. However i know where to look stuff up and that helps me a lot
Jack Russell TerrierOP
You are right, i will read it. Thanks
linesofcode
I think you guys could just use notion or google sheets
With just a bit of manual steps
And get all of this working out of the box
American Crow
Yea i told him the same thing also plenty of apps but its an excerise project for him
Jack Russell TerrierOP
Idk about notion or google sheets 😄 I can build something in React or Next and with it i can make UI as i want and need.
Customized as i prefer
Customized as i prefer
It should be simple, hopefully
or i do learn a lot
linesofcode
Don’t exercise at the expense of other people’s data
You’ll be storing timesheet info and probably some personal details of employees
Do you have a plan on how to secure that stuff?
Jack Russell TerrierOP
Supabase authorization should be enough no ?
It would be really small app with robots blocked
linesofcode
What I’m trying to get at is that if you’re not confident about this stuff
Don’t build something that uses other people’s data
Anyways, it’s not my data and not my employees
So good luck
Jack Russell TerrierOP
Hmmm, it would be just name hours worked and bolean for approval.
How other people do apps like that as newbies ? Its basic Crud with Supabase Authorization so it should be alright.
URL would not be advertised also
How other people do apps like that as newbies ? Its basic Crud with Supabase Authorization so it should be alright.
URL would not be advertised also
its also going to be data which are public
avaible online, except worked hours
American Crow
This guy yapping about Data Protection after suggesting putting the same data into Notion or Google Sheets. Either follow through with the Data Protection argument, which is a good one or don't "help" at all if you just lay stones in the way lmao