DEV Community

loading...

I'm a noob at ReactJS and made this 😅

Brayden W ⚡️
Developer 💻 • Designer 🎨 • Freelancer 💪🏼 • Creator 💭
・1 min read

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/

Github Repository: https://github.com/BraydenTW/simple-react-crm

Any feedback or ideas for what I should try next would be awesome.

Thanks again!


This post was orignally from me on Indiehackers. Check it out here: https://www.indiehackers.com/post/after-learning-react-for-the-past-24-hours-i-made-a-simple-crm-tool-02d26f1ef9

Discussion (58)

Collapse
link2twenty profile image
Andrew Bone

Very nice 4 unique components, with functions connecting them!

celebrate

If you wanted to expand on this adding an "are you sure?" modal popup on delete might be a nice touch!

Collapse
braydentw profile image
Brayden W ⚡️ Author

Great idea! Thanks :D

Collapse
gbrantunes profile image
Gabriel Antunes

Nice UI! Testing your app i found two things:

  1. the customer panel can't handle long names
  2. I was able to add a empty customer name by adding an space

UI test

Collapse
braydentw profile image
Brayden W ⚡️ Author

Responsiveness. Can't believe I forgot about that 😅

Thanks for pointing it out!

Collapse
valentinbcn profile image
Valentin

Looks really neat and clear ! congrats :D

It feels like it's mobile oriented so maybe you could try to make it more 'dektop oriented' aka fullscreen (media-queries and so ?) , hmmm and maybe you could look into animations too (?)

Have a nice journey by learning React ! :D

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks!

Collapse
vberen profile image
Nicklas Wessel • Edited

Looks great :)
Is there any reason you don't use functional components instead?

My suggestion would be to focus on that -
Personally when I made the switch from class components to functional components, was such a huge difference for me. I suddenly felt productive writing components.

States and lifecycle methods suddenly became very easy to master and very fast to write.

The same component can suddenly be halv the amounts of code line.

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks!

Simply for what I’ve mainly learned has been class components. I’ll try using functional components mainly in my next project.

Thanks for the suggestion!

Collapse
louislow profile image
Louis Low • Edited

Looking good... Since you have started this, should you continue to work on the noob project into a pro full-fledged CRM? Just give yourself a few months. If you don't like it, you can always do $ rm -rfv * and see them gone.

Collapse
braydentw profile image
Brayden W ⚡️ Author • Edited

This was just a way of me practicing my skills from the past 24 hours. I'm planning to learn Redux and Styled Components.

Collapse
daxdax89 profile image
DaX

Got repo?

Collapse
braydentw profile image
Brayden W ⚡️ Author
Collapse
daxdax89 profile image
DaX

Any particular reason why are you not using arrow functions?

Thread Thread
braydentw profile image
Brayden W ⚡️ Author

Not sure, I was just using the rfce VScode snippet and it generates one without arrow functions. Do you know of a shortcut that generates a stateless functional component with an arrow function?

Thread Thread
daxdax89 profile image
DaX

I wish. I type them manually. Installed bazillion extensions just to see nije of them work 😂

Thread Thread
braydentw profile image
Brayden W ⚡️ Author

Okay no problem then. I can handle it 😅

Collapse
braydentw profile image
Brayden W ⚡️ Author

Not yet, I'll let you know when I do :)

Collapse
arunmurugan78 profile image
Arun Murugan

Nice UI

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks :-)

Collapse
mis0u profile image
Mickaël • Edited

Nice work bro. For the security, you should put a required in JS and HTML because if I inspect the element and I delete required I can still submit it

Collapse
sriduh profile image
Sridhar

Mickael, I am just curious about how to do that. I am also a beginner in Web development.

Collapse
mis0u profile image
Mickaël

Hi Sridhar, I'm a php developer, I don't know React sorry

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks. I'll work on that :)

Collapse
andrewbaisden profile image
Andrew Baisden

Cool nice start.

Collapse
polluterofminds profile image
Justin Hunter

Welcome to the wonderful world of React! Great start!

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thank you Justin!

Collapse
vishnudileesh profile image
Vishnu Dileesh

Looks neat, keep making progress

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks Vishnu!

Collapse
djuric profile image
Žarko Đurić

It's beautiful!

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thank you so much!

Collapse
jimcmorrison profile image
JimCMorrison

I'd be happy to check out your repo! React is a great library to learn in this current climate. Good luck on your adventure Brayden!

Collapse
braydentw profile image
Brayden W ⚡️ Author

The repo link is here: github.com/BraydenTW/simple-react-crm

Collapse
jimcmorrison profile image
JimCMorrison

Thanks! Be sure to update your Readme.md to personalize it with the project goals, tools used, and a brief author bio!

Thread Thread
braydentw profile image
Brayden W ⚡️ Author

Good idea! I’ll be sure to do that :D

Collapse
hnrq profile image
Henrique Ramos

Congrats, man! it looks really nice on mobile! Good luck on learning React :D

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks so much!

Collapse
simpleadam profile image
simpleAdam

try writing tests for your code. test your most recent commit.

Collapse
braydentw profile image
Brayden W ⚡️ Author

Yeah, I didn’t really work on that.

I kind of skipped over it since it was my first project. I’ll be implementing them in my next web app I’m working on 🙃

Collapse
imshines profile image
Mohan Kumar

That's a pretty neat UI ❤❤❤
I've been trying to make one as well once It's done I'll share here.

Try using the useRef hook and try implementing localStorage 👍

Collapse
braydentw profile image
Brayden W ⚡️ Author

Cool! I'll check those out for the next time :D

Collapse
marhime profile image
Marhime • Edited

Well done and good looking UI !

But you should use react refs to refer dom elements

en.reactjs.org/docs/refs-and-the-d...

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks! I'll try that out :)

Collapse
georgeoffley profile image
George Offley

Nice work!

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks!

Collapse
adam_cyclones profile image
Adam Crockett

The one and only defect I could find.

Long names.
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
braydentw profile image
Brayden W ⚡️ Author

Yep, got to work on that 😅

Collapse
sashank__r profile image
Sashank Rampalli

Awesome bro!!! Keep going

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thank you!! :D

Collapse
jonatasoc profile image
Jonatas de Oliveira Coêlho

Very nice, Brayden!

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks!

Collapse
romelmahmud profile image
romelmahmud

great job man. I am entering React world.. which CSS framework you use?

Collapse
braydentw profile image
Brayden W ⚡️ Author

At the moment I just use plain CSS. Thinking of Tailwind :P

Collapse
abhisheknaiidu profile image
Abhishek Naidu

Is that Material-UI , you've used?

Collapse
braydentw profile image
Brayden W ⚡️ Author

Nope, all styles made by myself :)

Collapse
richardstark profile image
RichardStark

Great job man!It's so quick to accomplish such a demo. Welcome to React!

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks!

Collapse
hanna profile image
Hanna

Looks nice. Good luck on the journey.

Collapse
braydentw profile image
Brayden W ⚡️ Author

Thanks for the support :D