learning them while building the app

[daring flume]

@west ether it's the best to start an own project first, but you should also learn the fundamentals with it

It's like building a house. You can stack stone above each other and hope that you can make the roof and maybe it works, but that's not how to build a house 😉

[west ether]

ye I've got a solid ground at the moment, basically jsut built the UI with a couple of inputs.

[daring flume]

not bad for the start. Do you use parallel and intercepting routes?

[west ether]

i build everything just in the main page.tsx file.

[daring flume]

ah ok. And let me guess, most of your components are client components, right?

[west ether]

this is what the UI looks like, I can't access it at the moment, sorry

everything was on "use client" 😅

wasn't working without use client, so I just used it for the whole page.tsx

[daring flume]

yeah, good design 👍

[daring flume]

what about you create all of on serverside and only the form is client side 🤔

[west ether]

Thanks, atm I need to set up these global variables and break it down to componenets

[daring flume]

global variables for..?

[west ether]

planning to do that later on, let me check my git why i started using the "use client"

bcs of the checkbox in the todo item

[daring flume]

ah you are right. I forgot that point. Yeah this one also needs to be an client component

what else is interactive in your app?

[west ether]

The theme set up. This is in the navbar "logged in user" dropdown menu

[west ether]

even the navbar

[daring flume]

do you already have a backend where you load and save the todos?

[west ether]

I'm before that point 😄

I learned variables and statehook with the change color theme function basically

[daring flume]

would it be helpful if I share my solution for data saving? 🤔

[daring flume]

the selectColor is only for one todo that showes the status of the todo?

[west ether]

its for the icons etc too

[west ether]

of course

[daring flume]

of the specific todo?

[west ether]

I can share my github too

[daring flume]

I am using amplify graphql. Ever heard about that?

[west ether]

even the navar etc, wait I’ll try to find a video again 😅

[daring flume]

yea, I will have a look 🙂

[west ether]

never 🥹

🥹

wrong emoji 😅

sorry

[daring flume]

take a look at this graphql example: https://graphql.org/

it's animated on the website... xD

and amplify builds around it, so you can easily access everything you need: https://docs.amplify.aws/lib/graphqlapi/getting-started/q/platform/js/

[daring flume]

ah now I got it

[west ether]

this is an older version, but it might help you with the idea

[daring flume]

your github is public?

[west ether]

I will update it in 1-2 hours, in outside atm and fhe last update was 20houes ago 😅

https://github.com/jacobfreedom/first-todo-app/tree/main/src

[daring flume]

haha ah ok xD

when you added graphql to your project you can controll everything about the task via the data you change

[west ether]

my friend recommended me to try using lovalstorage first

[daring flume]

localstorage for an nextjs project? I think that's a little out of case. Of course you can use that, but it's like: #1162443972929667184 message

[west ether]

would you not recommend it?

I am currently startijg to work with arrays and breaking down the project into components

for which I need global variables

basically taking it step by step

[daring flume]

I would not recommend it. I tried it myself and now I have everywhere stale data... and I am dying.. and my project too.. because I don't know where I have which data...

[daring flume]

are u using a theme based library?

[west ether]

for setting up the theme colors via the vid i shared?

I’m using NextUI

[daring flume]

do you like NextUI? I just heard about it, but never used it 🤔

what do you think about it? What do you hate and what do you love?

[west ether]

it’s still in development so thete are a couple of things that are missing, but it helped me greatly with learning how to use react etc

the components look bisually great there

visually”

but sometimes it’s lacking some critical functions for them

[daring flume]

ah ok, that helps me. What do you think about this library? https://ui.docs.amplify.aws/react

[west ether]

ill check it out in a while

will you be here in 30m @daring flume

[west ether]

I'm here. Here's the latest version @daring flume
https://github.com/jacobfreedom/first-todo-app/blob/main/src/app/ColorContext.tsx

The ColorContext file is slightly messy. I was trying a couple of ways to create it.

I tried to create it by chatgpt which wasn't working, then I tried to adjust the code myself without understanding it properly. Then I tried to create the purest and basic way of creating global state.

The last one which I'm currently using was generated by chatGPT again. I'm understanding the code now and don't think that there are any issues in it.

The <Nav> component is setting up the setSelectedColor.

I have wrapped my page.tsx in <ColorProvider>
then <Nav> is used.

Since I am using the "selectedColor" in page.tsx already I had to use 'useColor' there -> this might be causing the error and I thought about creating another component for rest of the code to utilize 'useColor' in another component. Not sure if this is what's causing the error.

I tried consolelogging the render and I already get the useColor must be used within a ColorProvider, before it even starts rendering the <Nav>

[west ether]

I believe that the added value can be great, but at the moment I'm not at the level where I'm able to fully understand it yet.

Also I think that for me currently it's better to try out the whole process instead of utilising tools that will make things easier.

For me it would basically be using <Button> from some library without knowing how to build it myself using CSS if it makes sense

[daring flume]

currently I am not able to see it

[west ether]

ahh maybe it's not public

ye it's private give me a second

[daring flume]

I hate to build buttons and other components myself lol xD

[daring flume]

yeah, if you don't want it public you can also invite me 🙂

[west ether]

publuc now @daring flume

[daring flume]

let quick look thought it

[west ether]

I don't think there is any issue with it being public and private in my case 😅

I still believe that the main issue is that the rest of the code in main.tsx is not a componenet and I'm utilising the useColor in there, but ChatGPT told me that it's not the issue

but majority of the times I got very bad non working suggestions from it 😅

[west ether]

how come?

[daring flume]

yeah, for me that looks fine. But I don't know why you are doing it so complicated xD

[daring flume]

don't worry, any begin is hard 🙂

[west ether]

is there any easier way?

if so I'm open to it

my development got completly on hold thanks to it

just troubleshooting

[daring flume]

when I try to design a button that they look like shit after I styled them... and the same is with other "easy" things

[daring flume]

of course xD

[daring flume]

because of the color thing? That's an optional thing in an todo app 🤔

[west ether]

ye I can relate to it, it's the biggest downside of frameworks tbh. I still like to tailor things on my own over using something pre-defined, but in this case I just used it to get the UI ready ASAP in order to move to the other parts where I'll learn the CRUD basics

[daring flume]

I like your idea with the icons. Maybe I introduce it for me as well ^^

[west ether]

what's the way? 😅

[daring flume]

yeah, I think that's better at the beginning. I use them until today xD

[west ether]

you mean the color changing on them or?

[daring flume]

I would also use a context (when it's not supported in my ui library) and then just provide and consume it. Not everything around it, what you know introduced 😄

[daring flume]

no, to have them as file in a specific folder, so all of them looks the same all over my app

[west ether]

It was basically in the library, just with other components. I took it and used it in order to play around with variables and to understnad how they work

playing around with a variable that has a couple of strings in it was a great way to hop into it

[daring flume]

ah got it. Yeah, sometimes that's cool to learn stuff ^^

where do you use that? https://github.com/jacobfreedom/first-todo-app/blob/935dccefb7a63b3cc7e533b9b62f91b7a0e7cb83/src/app/page.tsx#L55

[west ether]

are you using the amplify one?

NextUI provides me only with the FE UI componenets, so the rest is up to me

[daring flume]

nah, the default usecontext. But amplify itself also provide theming options, that can easily be changed

[daring flume]

FE UI? what does that mean?

[west ether]

ahh got it

[west ether]

front end UI

it doesn't enter backend, if it did I'd be completly lost

I can't even set up context properly 😂

[daring flume]

Amplify UI also have more the frontend stuff, but also have some backend functionalities. You can see them here: https://ui.docs.amplify.aws/react/connected-components/authenticator

[daring flume]

you won't. Normally it's easier with backend, because you don't need to manage all you data. You just request what you want to have and the rest will be handled by the server. So:
less code for you and more overview ^^

[west ether]

are there any other ways? 😅

[daring flume]

for me it currently looks like that:

                    <Link href={userDomain + page.url} target={"_blank"}>
                        <Icon height={"25px"} width={"25px"}>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5"
                                 stroke="currentColor" className="w-6 h-6 text-black">
                                <path strokeLinecap="round" strokeLinejoin="round"
                                      d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
                            </svg>
                        </Icon>
                    </Link>

So just the svg directly inside my component and it looks soooo messy and no one knows what kind of icon that is...

[west ether]

not used yet, I started having the with the context when I wanted to focus on this, which is a part where I want to learn how to work with inputs and arrays

/objects 😄

[daring flume]

ok, you can delete that lol xD

[west ether]

NextUI has it too, but I'm just building it myself, now stuck with it for 2 days

[daring flume]

than you may want to use another library 😄

[west ether]

I was wondering why all guides were starting with a server set up 😂

[daring flume]

haha because of that 😉

[west ether]

can't you change it easily?

[daring flume]

yes I can and because of that I think about implementing your style with the folder and file system

[west ether]

ye it's not working either way 😂

basically I know what to do next, but I have no idea how to write it down

in a way to make it work

same thing as with the setcolor

[west ether]

it will make things better for you in the long run i believe

not an expert tho 😅

[daring flume]

I recommend you to validate by browser (html form and html attributes) and only the important stuff will be validated by the server. And then send the data to the server and work with it

[daring flume]

haha yeah xD

[west ether]

Do any of these things make sense?

I already know the the error occurs during rendering of the page.tsx and doesn't even reach the Nav component

[daring flume]

When I would be you in your current situation I would create a new project and hold to the nextjs framework. So: I would work with server components, backend, caching, ...

The framework is build to help you, not to hold you :d

[west ether]

I'll try to set one up once I fix this issue

[daring flume]

chat gpt does only know the pages directory and not the functionalities of the app directory. So in most of the cases he can't help you. I prefer using #1089389297548931182 for nextjs AI help

[daring flume]

Don't worry about beginning new: #1162443972929667184 message

Because you learned a lot and you will learn even more, when you start new

[west ether]

I don't understnad waht's the causing the issue, that's the problem

[daring flume]

And exactly there is the problem: when I don't know where the issue in my code is, I can' t fix it 🤷‍♂️

[west ether]

I'd like to fix this issue and then store the outputs in some array/object at least

[west ether]

ye pretty much 😂

using typescript is also making it even bigger mess for me tbh

[daring flume]

of course you can. That's just my mind when I would be in your situation 🙂

[west ether]

I spent too much time on it to quite now tbh

quit"

[daring flume]

then don't use it ^^
I tried it for myself and I think it's helpful for the IDE but takes some time to setup everything, defining types, ...

This is my todo app: https://github.com/B33fb0n3/nextjstodoapp

[west ether]

same issue

I don't see any reason to start again atm, maybe only typescript 😂

to get rid of all the unecesary complications for me

[daring flume]

lol. Would you share me your email?

(if not public here, then under this link: https://privnote.com/)

[west ether]

are there any disadvantages in having a public github project? i just skipped on the part with all the warnings 😅

I've got plenty of them, I'll share one with you

[daring flume]

for me I learned a lot over the time until now and I now it's not the best code. Some of my projects are shared with others and I don't want that they see this "not that good" code

[west ether]

https://privnote.com/nnGbtdIh#L89LSJP25

[west ether]

ahh, well I'm not able to tell what a good and bad code is yet tbh

[daring flume]

invited

[west ether]

Do you think that I can find a solution to my problem if i post it in #1007476603422527558 ?

[daring flume]

yea, but the others I work with 😉

[west ether]

I'm pretty much a newbie with github, do I have to download it and install it?

[daring flume]

Yea, maybe. But you will reach the next problem soon and then you are in the same situation. Learn to solve problems or ask anytime others 🙂

[west ether]

you're working as a dev already?

[daring flume]

Click this link: https://github.com/B33fb0n3/nextjstodoapp
And then you can navigate thought it online in your browser

Just click on the files you want to see

[west ether]

I'd like to see what it looks like in a browser

[west ether]

I always try to fix everything on my own, but sometimes I just get to the point where it's beyond my understanding as right now for example. The issue is with a simple global state. If I see the solution I can find out what was causing the error

[daring flume]

you should be able to access the backend, because the api key is exposed in the aws-exports.js. If you clone the project and start it as a normal nextjs app, than you should be able to see it

[daring flume]

but you need to switch it.

From (now): first solution then I know the issue
To (future): first issue then build solution
^^

[west ether]

isn't your todo list mostly backend?

I can't find any frotned in it

[daring flume]

I just tried it myself and I get

Error: Request failed with status code 401
So unauthorized. I don't think it's possible to access the backend. And because of that the project is unusable when you don't have any backend xD

[west ether]

components

[daring flume]

you can see the rendering in the page of the TodoList: https://github.com/B33fb0n3/nextjstodoapp/blob/0dcf8d71bb3a51e1e1b0864aaf7d6b778f398aff/app/page.js#L23

And inside the TodoList one Todo will be rendered:
https://github.com/B33fb0n3/nextjstodoapp/blob/0dcf8d71bb3a51e1e1b0864aaf7d6b778f398aff/app/TodoList.js#L48C29-L48C29

[west ether]

got it now thx 😄

[daring flume]

and now you may see how much the backend do ^^

[west ether]

I basically did it in thhis way.

Built the whole UI, a couple of inputs, assinged the outputs to a variable, I have all the outputs and need to store them -> thing I need to learn

During this process I already faced many issues that I solved on my own, by understanding the issue and finding the solution

Then I started breaking it down in componenets where I need to utilize the context, where I already faced the first issue with not having a global state, so I found the solution on how to build it, then gained a basic understanding of it, but now it's still not working and I can't understand what the issue is.

I kinda understand the issue, it's with the useColor, but I don't understand what precisely is causing the error.

It's already happening on the page.tsx, so I have a couple of assumptions, but a confirmation of someone would be really helpful.

[daring flume]

Maybe you want to first try to ask #1089389297548931182 then you get a nearly solution and then you just refine it with your new situation. Some of my problems are already solved with that

[west ether]

I'll give it a shot

[west ether]

found the solution, hopped on a call with one guy, was just a matter of putting my provider in the provider file 😂

just placing it here, matter of 3 min 😅

[daring flume]

Haha nice, good job. You might think that the provider class is there for the providers 😂😜

Maybe see you somewhere again. Wish you a wonderful day 🔥

[west ether]

lesson learned for the nxt time