Introduction
I'm currently in the fourth week of my #100DaysOfCode challenge, and this week has been one of the most exciting so far.
After spending the previous weeks strengthening my backend skills with Spring Boot and MongoDB, this week was all about bringing everything together by building the frontend of my Job Posting Application with React.
I focused on building the user interface one component at a time instead of rushing through it. From designing the navigation bar and hero section to building the job cards, job list, and search functionality, every step helped me understand React better and how it communicates with a Spring Boot backend.
Of course, it wasn't without challenges. I spent time debugging integration issues, dealing with MongoDB Atlas connection problems, and figuring out how to connect the frontend to the backend properly. But after working through those issues, I was finally able to fetch and display real job data from MongoDB in my React application.
Looking back, this week reminded me that building software isn't just about writing code. It's about connecting different pieces together, solving unexpected problems, and staying patient until everything finally works.
The only way to do great work is to love what you do.
– Steve Jobs
Day 17: A Day of Debugging, Not Building
I had planned to continue working on my Job Posting API, but the day turned out very differently from what I expected.
I spent most of the day debugging issues that had started the previous day. One of my school projects suddenly stopped working as well, so the entire day became a debugging session.
Although I wasn't able to make visible progress on the application itself, Every problem solved improves my understanding of how the technologies actually work.
What I Learnt and Explored
- Troubleshooting MongoDB Atlas SSL connection issues
- Debugging Spring Boot and MongoDB integration
- Understanding the difference between IDE warnings and actual runtime errors
- Comparing Spring Boot 3.x and 4.x while investigating dependency compatibility
- Restoring MongoDB Atlas Search functionality
Challenges I Faced
The biggest challenge wasn't writing code—it was identifying the real source of the problem.
At first, IntelliJ's warning that MongoTemplate couldn't be autowired made it seem like my configuration was incorrect. However, after testing the application and examining the stack traces, I realized that the warning was unrelated to the actual failure. The application itself was fine; the connection to MongoDB Atlas was the real issue.
While troubleshooting, I also compared Spring Boot 3.x and 4.x to understand whether dependency compatibility was contributing to the issue. After several hours of testing different possibilities, checking configurations, and verifying my dependencies, I eventually restored the connection and got MongoDB Atlas Search working again.
This experience reminded me that error messages and IDE warnings should always be investigated carefully instead of accepted at face value. Sometimes the first thing that looks wrong isn't the actual cause of the problem.
Although I didn't build any new features that day, I walked away with a much better understanding of Spring Boot, MongoDB Atlas, SSL connections, and the debugging process itself.
By the end of the day, the application was running again, MongoDB Atlas Search was working, and I had gained valuable experience that I know will help me solve similar problems much faster in the future.
Day 18: Started the Frontend of My Job Posting Application
After spending the previous days building the backend of my Job Posting Application with Spring Boot and MongoDB, I finally started the frontend.
I decided to build the frontend with React because I wanted to strengthen my frontend skills while learning how a React application communicates with a Spring Boot backend through REST APIs.
Instead of jumping straight into building the user interface, I spent the day setting up the project properly and understanding how the frontend would consume data from the backend. I wanted to build the application on a solid foundation before adding features.
What I Learnt and Explored
- Creating a React project with Vite
- Organizing a React project structure for scalability
- Understanding how React consumes REST APIs
- Learning how the frontend communicates with a Spring Boot backend
- Preparing the application for backend integration
Day 19: School Presentation Day
On Day 19, I had the opportunity to present my team's Air Reservation Application at school.
The application was built using React Native (Expo), Spring Boot, PostgreSQL, and Supabase, and was designed to make searching, booking, and managing flight reservations easier.
Although the presentation itself went well, I was able to explain what the application does, how it solves a problem, and how users interact with it.
Watching people ask questions and engage with the project also gave me a better appreciation for communicating technical ideas to different audiences.
What I Learnt and Explored
- Presenting a software project to an audience
- Explaining the purpose and value of an application
- Communicating technical concepts in a simple way
- Observing how people interact with a software product during a presentation
After the presentation, it was time to shift my focus back to my Job Posting Application and continue building.
Day 20: Building the Foundation of My React Frontend
After learning how React communicates with a Spring Boot backend, it was finally time to start building the frontend of my Job Posting Application.
Rather than rushing into creating every page, I decided to take my time and build the application one component at a time. I wanted the project to have a clean structure that would be easy to maintain as more features were added.
What I Built
- Created the React project using Vite
- Organized the project structure
- Built a responsive navigation bar using React Icons
- Designed and implemented the hero section
- Improved the overall layout and styling using plain CSS
- Planned the component structure to make the application easier to scale
I also spent some time improving my interview skills by reading an article by Wes Kao about telling better stories during interviews. One lesson that stood out to me was to keep the Situation in the STAR method short so you have more time to explain your actions, results, and the impact you made.
Article: https://newsletter.weskao.com/p/in-job-interviews-keep-your-backstory
By the end of the day, I had the foundation of the frontend in place and a clear plan for the remaining components before connecting everything to my Spring Boot backend.
Day 21: Building the Core of the Frontend
I continued working on the frontend of my Job Posting Application by focusing on the components that users will interact with the most.
Instead of trying to build every section at once, I concentrated on creating reusable components that will make the application easier to maintain and extend as development continues.
What I Built
- Designed the Job Card component
- Built the Job List component
- Continued improving the overall frontend structure
- Focused on creating reusable UI components for future features
Although I couldn't spend as much time coding as I had planned because of other commitments, I still made steady progress.
One thing I've come to appreciate while building this project is that frontend development isn't just about making an application look good. It's also about organizing components in a way that keeps the codebase clean and makes adding new features much easier.
By the end of the day, the foundation of the application's user interface was taking shape, and I was ready to begin connecting the React frontend to my Spring Boot backend.
Day 22: Connected the Frontend to the Backend
After spending the previous days building the user interface, it was finally time to connect everything together.
I replace dummy data with real data from my Spring Boot backend and MongoDB database.
What I Built
- Connected the React frontend to my Spring Boot backend
- Fetched and displayed real job data from MongoDB
- Connected the search functionality to the backend
- Fixed integration issues that came up during development
- Made improvements to the user interface
Seeing the application display real data instead of hardcoded information completely changed how the project felt. It was no longer just a collection of frontend components—it had become a working full-stack application.
Like every integration, there were a few issues to work through before everything functioned correctly, but solving them gave me a much better understanding of how React, Spring Boot, and MongoDB communicate with each other.
By the end of the day, I had a working frontend connected to a real backend. The remaining work was to polish the application, implement the job application feature, and deploy it so other people could use it.
Based on what you've completed in Week 4, your Week 5 goals should naturally build on it.
Goals for Week 5
As I head into Week 5 of this journey, these are the goals I've set for myself:
- Complete the remaining features of my Job Posting Application
- Implement the job application functionality
- Polish the user interface and improve the overall user experience
- Deploy the frontend and backend so the application is live
- Learn more about deploying Spring Boot and React applications
- Continue strengthening my skills
- Keep documenting my journey and sharing what I learn
Week 4 showed me what it takes to bring a full-stack application together. From building the frontend with React to connecting it to my Spring Boot backend and MongoDB database, every step helped me understand how different parts of an application work together.
There's still plenty to improve, but seeing the project evolve from an idea into a working application has been incredibly motivating.
I know there's still a long way to go, but I'll keep building, learning, and improving one day at a time.
If you're also learning, building, or growing in tech, I'd love to connect and follow your journey too.
Let's keep building. 💙
LinkedIn:
https://www.linkedin.com/in/onatade-abdulmajeed/
X (Twitter):
https://x.com/spider337761
Top comments (0)