Simple ReactJS Website

Inspiration

What initially inspired us was creating something simple, and something we could handle. This was our first Hackathon, so we mainly wanted to learn from the experience. We haven't worked with the technologies we used in the project before.

What it does

Our project is pretty simple. It's a website that you can draw on and then clear the canvas by pressing a button. Using your mouse, you can draw lines on the page.

How I built it

We built it using node.js and reactjs. We created a canvas component that houses basically the entire program. We used a useEffect hook to run the canvas after the render, and a clearCanvas() function to clear the page.

Challenges I ran into

Surprisingly, the hardest part of the program was creating the button to clear the canvas. I personally spent around 3 hours trying to implement it. I didn't realize that any of my code in the useEffect() hook could not be called outside of the hook. So after constantly trying different things, I finally figured it out. I had to declare the clearCanvas() function outside of the hook, and then use a disgustingly long statement to clear the canvas from the source.

Accomplishments that I'm proud of

I'm mostly proud of what I learned from the project. I wasn't very familiar with ReactJS, so my knowledge has improved on the subject. in the program itself, the accomplishment I'm most proud of has to be the button that clears the canvas. Simply because of all the hassle I went through to implement it.

What I learned

I learned quite a bit during this project. I learned how to set up a react project, how a reactJS project works, and many of the technologies we used were new to me. We learned how to create components in React and how to use hooks. I also learned how to modify content in the hook by using the source directly.