After learning React for the past 24 hours, I made a simple CRM tool! 🧰
Hi everyone!
A couple days ago I made a post saying that I was dropping my side-project. I wanted to open more paths for the future. One of the goals I wanted to accomplish was to learn ReactJS.
Over the past 24 hours, I've spent some time learning the fundamentals of React and made my first project using it.
It is a simple CRM (Customer Relationship Manager). In this, I displayed my knowledge of components, props, state management, and styling.
View it here: 👉 https://react-crmtool.netlify.app/
Check out the repo on Github: https://github.com/BraydenTW/simple-react-crm
Any feedback or ideas for what I should try next would be awesome.
Thanks again!
Trending on Indie Hackers
40 open-source gems to replace your SaaS subscriptions 🔥 🚀
After 19,314 lines of code, i'm shutting down my project
Need feedback for my product.
We are live on Product Hunt
Don't be a Jerk. Use this Tip Calculator.
Great project 👌
I remember when I learned React and Redux back in the day. It was super confusing given the functional nature. You should definitely do a more in-depth writeup about this. Something along the lines of "React in 24h". This could be an ebook or a blog post.
For most developers React is still this beast you have to spend weeks or months with to really grok it. But as you demonstrated there's a lot you can learn in just 24h to be dangerous and build a real world application which uses functionalities you'd use 90% of the time.
Other than that you might want to look into Next.js if you haven't already. AFAIK Exploding Topics was built with Next.js and MongoDB Atlas. You should be able to build very sophisticated apps with such a simple stack.
@BraydenTW if you do decide to use redux for state management, please use redux toolkit ... so much better than vanilla redux, and it's the recommended approach by the redux team. It removes almost all the "boilerplate" issues that vanilla redux has and adds a bunch of really useful utilities like immer, reselect and entity adapters.
Very cool! I've heard of it before and know it's a good tool :D
This comment was deleted a year ago.
Why not Recoil.js? Awesome stuff from the FB team, much simpler than redux imo
This comment was deleted a year ago.
Thanks!!
I think that’s a great idea. I’ll work on some blogging :)
Sure! Please post the outcome here on IH. I myself am interested in "brushing up my rusty React skills" 😅
haha good luck to you too!
Awesome job learning the basic fundamentals of React in 24 hours.
If you have existing Javascript experience you'd pick up React quite quickly. I would recommend creating a much more complex features, doing deep dives into Redux/Redux toolkit and the use of hooks!
Yep, I’m learning Redux this afternoon :)
Nice project, by away I just check out your https://buildfaster.co/ site and you have beautiful template, I wonder why it not generate money, maybe need better sale strategy.
And just curious, you working as a full time developer and blogging, creating all of this at a same time?
Thanks. Yeah, I'm not the best salesman and I'm sticking to development in hopes to get a good job soon.
I am not a blogger... but plan to do it on the side on my personal website some day ;)
Congratulations Brayden.
The css themes look great. Do you create them from scratch? Any plans to build out more of those components in a library?
Thanks :D
I made the CSS completely from scratch. You can see it here in the Github repo.
https://github.com/BraydenTW/simple-react-crm/blob/master/src/App.css
I might plan to, but I am mainly focusing on learning the fundamentals :)
Thanks for sharing. @BraydenTW, out of curiosity, what would you call the visual style of your app / css? I have been looking for themes / React components that use that style.
Also, are there any component libraries / themes that you know of that use that style?
Hmm... not sure. It has been trending in 2020 and is a mix of minimalism and neumorphism.
Thanks Brayden
No problem :)
Congrats @BraydenTW it looks super nice. Where do you learn React?
I'm interested because I will want to learn it, but I don't know which source is the best. I have been learning JS vanilla for two months. Some devs tell me that the official React documentation is Ok but is not the best to start.
Thanks!
I learned React over the past 24 hours from here:
Thank you!
You're welcome! DevEd is easily my favorite coding Youtube channel of all time 🤩
Got an error TypeError: e.customers.map is not a function
I don’t seem to get that error. Can you send a picture? How did you emulate this? Or you can submit an issue on the repo.
/favicon.ico:1 Failed to load resource: the server responded with a status of 404 ()
react-dom.production.min.js:209 TypeError: e.customers.map is not a function
at s (List.js:7)
at Ki (react-dom.production.min.js:153)
at Fa (react-dom.production.min.js:175)
at vo (react-dom.production.min.js:263)
at cu (react-dom.production.min.js:246)
at ou (react-dom.production.min.js:246)
at Zo (react-dom.production.min.js:239)
at react-dom.production.min.js:123
at t.unstable_runWithPriority (scheduler.production.min.js:19)
at Wl (react-dom.production.min.js:122)
Za @ react-dom.production.min.js:209
react-dom.production.min.js:123 Uncaught TypeError: e.customers.map is not a function
at s (List.js:7)
at Ki (react-dom.production.min.js:153)
at Fa (react-dom.production.min.js:175)
at vo (react-dom.production.min.js:263)
at cu (react-dom.production.min.js:246)
at ou (react-dom.production.min.js:246)
at Zo (react-dom.production.min.js:239)
at react-dom.production.min.js:123
at t.unstable_runWithPriority (scheduler.production.min.js:19)
at Wl (react-dom.production.min.js:122)
Thanks for letting me know of this, again do you have a Github account? Please submit an issue on the repo so I can better document of the progress.
Thanks.
Looking good! Especially for only 24 hours worth of learning 👍💯
One small rec as a next step: it's nowadays a React best practice to use stateless functional components (with hooks) instead of class-based components. So if you keep doing more React, I'd recommend looking to move in that direction. Just a tip!
Great work, keep it up!
Thanks!!
I’ve heard lots of suggestions for that so I guess I’ll have to use it more often :P
Nice, the result is really good for only 24 hours of learning React.
You will learn a lot of optimization techniques and best-practices over time, but when you start, as long as it does what it's supposed to do it's enough.
Thanks for your encouragement!
Damn that styling was awesome .
Thanks!!
Looks good! Here are my recommendations:
I’ll have to try Typescript. Thanks! I am actually sticking to create-React-app for now because I am learning some smaller fundamentals and creating single page apps an later, I’ll try Next.js. I’m mostly sticking to Frontend now, but if one of my projects require a backend of some sort, I’ll be sure to try GraphQL or Apollo.
And for the CSS, I was going to use Tailwind, but wanted to focus on the actually functionality first without using other frameworks.
Thanks for the tips! These are very helpful :D
The reason I suggest Next over CRA is because it gets rid of a lot of the setup for you allowing you to focus more on the react itself. But other than that, good luck!
Nice!
This would be a great post over in Learning to Code, too :D https://www.indiehackers.com/group/learning-to-code
Good idea! I might put a more in-depth sorry in there :D
That'd be awesome :)
This is impressive. It's also really attractive to folks learning React and who want something to show for their efforts right away. I agree with the others- I would turn this into a blog post or better yet a YouTube video!
Good idea! Thanks :)
Sweet! As a next step I would definitely look into hooks, Redux (with Redux Toolkit!), and styled components.
Yes, I was planning to do both next :D