After taking a brief break from using React, I decided to get back into it. Initially, I planned to start with Next.js since it is the modern framework that everyone is talking about. However, I realize that jumping straight into it might be overwhelming since I haven’t used React in a while. Instead, I chose to review by setting up a project in vanilla React – what better way than to solve a real-world problem?
The Project: A website for down-to-earth contractors
A local construction company needed a modern website to showcase their services, highlight past projects, and provide a way for potential clients to get in touch. This seemed like the perfect opportunity to brush up on my React skills while creating something meaningful.
Main features of the website
Responsive design
The website is fully responsive, ensuring the best user experience on desktops, tablets and mobile devices.
dynamic content
Each service (excavation, grading, demolition, etc.) has its own dedicated page with descriptive content and images.
Contact form using EmailJS
This is my first time integrating EmailJS into a project. The contact form allows users to submit inquiries, which will be sent directly to the company’s email. Setting it up was a learning curve, but seeing it run seamlessly is satisfying.
React review
Working on this site is a great way to revisit basic React concepts. I have used it extensively useState Hooks for managing form data and displaying dynamic status messages. Creating components, managing props, and styling with CSS were all valuable exercises that reminded me why I love using React.
construction process
planning and structure
I started by outlining the structure of the website: homepage, services section with individual pages, gallery and contact page. Breaking the project down into smaller components helps me stay organized and focus on one feature at a time.
Challenges and Solutions
Email JS integration
Setting up EmailJS is new territory for me. Learning how to configure services in my project took some trial and error, but the results were worth it. It’s exciting to see how easy it is to integrate third-party tools into React applications.
Navigation bar style
Ensuring the navigation is responsive and intuitive across devices will require some tweaking. I learned more about CSS and how to use conditional category names effectively in React.
enjoy the journey
The process of building this website reminded me how much I love learning by doing. Solving problems, seeing the results of your work, and knowing you’re creating something valuable is addictive.
Looking to the future
This project rekindled my passion for React. Looking to the future, I’m excited about:
-
Rebuild my portfolio website
My current portfolio was outdated and I was eager to create something that better reflected my skills and projects.
-
Learn more about React basics
While this project is a good review, there is always more to learn. I plan to delve deeper into state management, performance optimization, and testing.
-
Try Next.js
Once I’m familiar with React again, I’ll tackle Next.js to explore server-side rendering and other advanced features.
in conclusion
Building a down-to-earth contractor website has been a rewarding experience. This reminds us that real-life projects are the best way to learn and grow as developers. If you’d like to see the code for this project, feel free to access the repository: