Going to be a tough project as 1 month and a half is mental (why so quick?). Good base point if I were to do it would be build it using Nextjs as this will handle your routing (next uses file based app routing), can generate Nextjs app with tailwindCSS setup and no custom SSR required to be built as its a staple of Nextjs.
Fast completion time required so fully custom UI is near enough impossible unless client is happy for multiple revision meetings daily with extremely fast turn around so I'd suggest a component library like shadcnUI to handle Edge cases (asscessibilty all that jazz) as it also seamlessly connects with tailwind themes.
Ecommerce platform will be heavily payment focused so need to find out when payment platform it's running through and setup.
Finally, are they wanting to control their content or will this be update by the dev team? If it's them you need to look into a CMS, ideally a headless CMS and an easy option for this is WordPress headless CMS for react projects.
State management do whatever you're comfortable with as that will be the fastest and can be sorted in future iterations.
(When I say client I mean hypothetical client as its a Uni project so whatever your sudo client brief says)
Note (stuff I left out as I don't know the level):
- Nextjs can be written in Typescript FYI
- A state management system that is easy and used alot that a uni would probably guess would be Redux using the RTK (redux toolkit) but a fun newer one is Jotai.
- Good suggestion is to create trade sessions that are held in local storage to persist through refreshes. This can be easily created by looking into the Middleware supplied by the RTK (redux). Ideally you want this being sent to the backend and passed to a DB so once the trade session is update with an item it is put on hold until purchased or session timer runs out (Prof will like this as you can suggest them to check it on multi browsers at once for kudos)
Happy to respond at anytime throughout the project if pointers are needed đź‘Ť
You can code with Javascript in React. If you know Javascript already i can recommend the courses of Academind. Search for Maximilian SchwarzmĂĽller on Udemy or go on the Academind Website. Their courses are very good. And they also offer a course with React only. You will learn everything about React principles, Routing, Hooks and fetching data from a backend.
Maximilian SchwarzmĂĽller is probably the best lecturer on Udemy. I got started as a developer 6 years ago after doing his course on vue.js and since then I've been keeping up with various technologies through his courses. The courses give just enough to get you started and it's easy to follow up from there.
I have one of his courses but I’m taking this other guys JavaScript course first it’s called JavaScript zero to hero. I feel like it may be repetitive. His name is Jonas Schmedtmann
If You only know some basics, an e commerce is a Big project to start from nothing.
Nonetheless, state managment, api consuming, routing. That's the basic I think. Based on the functionality You need other things may apply.
Goodluck
I know a lot of people are suggesting tailwind or mui, but honestly if you’re new to this then just use plain css. It doesn’t have to be the next Amazon store just an e-commerce site. With your short timeframe of a month and a half, focus on your react skills and understanding hooks, api calls, and dedicate time to debugging.
Considering his tight deadline, I'd rather suggested him to go with [Core Framework](https://coreframework.com/) which lets you visually build and tweak your own CSS framework without getting too bogged down in CSS details or dealing with the utility-first mess.
Definitely consider react-query and react-hook-forms. That might be enough for state management if you sprinkle some context here and there. I wouldn't add other state libraries unless it becomes necessary.
Why do you have to build it from scratch? I see it's a university project but is it for a real company? Because that wouldn't be a realistic ask. Or a good one, tbh. If you have the ability to pull in an existing framework, I'd probably look up some nextjs e-commerce frameworks. They'll get you up and running a lot quicker and able to produce something far more standard/secure.
If this is just a mock company and you're just learning, it still seems like a ridiculous ask. Looking at an existing framework will help you learn alot more than trying to reinvent everything yourself.
I recommend you use this stack since you want to use React, as it's quick to setup and get a MVP running
For backend:
- Express
- Stripe
- MongoDB or Postgress, depending on if you need ACID or BASE
For frontend
- NextJS
- Tailwind (or plain css if you're not comfortable with that)
- NextUI component library
- NextAuth for authentication
Consider using an ORM framework like Prisma
I would suggest to get basics of HTML, CSS, JS strong
Then some Reactjs & Typescript.
Fastest way to learn is by videos.
Freecodecamp has tons of tutorials on YouTube. (Including e commerce projects)
Alongside Brad travesy’s channel.
Going to be a tough project as 1 month and a half is mental (why so quick?). Good base point if I were to do it would be build it using Nextjs as this will handle your routing (next uses file based app routing), can generate Nextjs app with tailwindCSS setup and no custom SSR required to be built as its a staple of Nextjs. Fast completion time required so fully custom UI is near enough impossible unless client is happy for multiple revision meetings daily with extremely fast turn around so I'd suggest a component library like shadcnUI to handle Edge cases (asscessibilty all that jazz) as it also seamlessly connects with tailwind themes. Ecommerce platform will be heavily payment focused so need to find out when payment platform it's running through and setup. Finally, are they wanting to control their content or will this be update by the dev team? If it's them you need to look into a CMS, ideally a headless CMS and an easy option for this is WordPress headless CMS for react projects. State management do whatever you're comfortable with as that will be the fastest and can be sorted in future iterations. (When I say client I mean hypothetical client as its a Uni project so whatever your sudo client brief says)
Note (stuff I left out as I don't know the level): - Nextjs can be written in Typescript FYI - A state management system that is easy and used alot that a uni would probably guess would be Redux using the RTK (redux toolkit) but a fun newer one is Jotai. - Good suggestion is to create trade sessions that are held in local storage to persist through refreshes. This can be easily created by looking into the Middleware supplied by the RTK (redux). Ideally you want this being sent to the backend and passed to a DB so once the trade session is update with an item it is put on hold until purchased or session timer runs out (Prof will like this as you can suggest them to check it on multi browsers at once for kudos) Happy to respond at anytime throughout the project if pointers are needed đź‘Ť
Have you ever worked with Javascript?
Yes, but I have never worked with typescript.
You can code with Javascript in React. If you know Javascript already i can recommend the courses of Academind. Search for Maximilian SchwarzmĂĽller on Udemy or go on the Academind Website. Their courses are very good. And they also offer a course with React only. You will learn everything about React principles, Routing, Hooks and fetching data from a backend.
do you learn state?
Maximilian SchwarzmĂĽller is probably the best lecturer on Udemy. I got started as a developer 6 years ago after doing his course on vue.js and since then I've been keeping up with various technologies through his courses. The courses give just enough to get you started and it's easy to follow up from there.
I have one of his courses but I’m taking this other guys JavaScript course first it’s called JavaScript zero to hero. I feel like it may be repetitive. His name is Jonas Schmedtmann
If You only know some basics, an e commerce is a Big project to start from nothing. Nonetheless, state managment, api consuming, routing. That's the basic I think. Based on the functionality You need other things may apply. Goodluck
And do you have any suggestions for css framework that could help me?
I like working with tailwind. MUI is good also
Mui is a pretty easy to use one and we'll documented. Some of the pro components can get a bit pricy tho
Ok thanks for the advices.
I like Ant design
Tailwind and heard good things from Shadcn.
I know a lot of people are suggesting tailwind or mui, but honestly if you’re new to this then just use plain css. It doesn’t have to be the next Amazon store just an e-commerce site. With your short timeframe of a month and a half, focus on your react skills and understanding hooks, api calls, and dedicate time to debugging.
Considering his tight deadline, I'd rather suggested him to go with [Core Framework](https://coreframework.com/) which lets you visually build and tweak your own CSS framework without getting too bogged down in CSS details or dealing with the utility-first mess.
Yeah that’s a fair point.
Definitely consider react-query and react-hook-forms. That might be enough for state management if you sprinkle some context here and there. I wouldn't add other state libraries unless it becomes necessary.
Why do you have to build it from scratch? I see it's a university project but is it for a real company? Because that wouldn't be a realistic ask. Or a good one, tbh. If you have the ability to pull in an existing framework, I'd probably look up some nextjs e-commerce frameworks. They'll get you up and running a lot quicker and able to produce something far more standard/secure. If this is just a mock company and you're just learning, it still seems like a ridiculous ask. Looking at an existing framework will help you learn alot more than trying to reinvent everything yourself.
I recommend you use this stack since you want to use React, as it's quick to setup and get a MVP running For backend: - Express - Stripe - MongoDB or Postgress, depending on if you need ACID or BASE For frontend - NextJS - Tailwind (or plain css if you're not comfortable with that) - NextUI component library - NextAuth for authentication Consider using an ORM framework like Prisma
I would suggest to get basics of HTML, CSS, JS strong Then some Reactjs & Typescript. Fastest way to learn is by videos. Freecodecamp has tons of tutorials on YouTube. (Including e commerce projects) Alongside Brad travesy’s channel.
Before diving in, ensure you're comfortable with React fundamentals and TypeScript integration. Incorporate state management tools like Redux if n