Full Stack Java Spring Boot ReactJs Todo App with Neon PostgreSQL

What are you most proud of, and what would you do differently next time?

This is my first-ever project integrating the frontend, backend, and database, with all components deployed in the cloud. This project is a full-stack Java Spring Boot and React.js Todo application using Neon PostgreSQL.

Backend:

1. Developed using Java and Spring Boot, with RESTful APIs deployed on Render.
2. Implemented CRUD operations using Spring Data JPA, including auditing with @CreatedDate and @LastModifiedDate, sorting through JpaRepository, and individual task updates.
3. Also used Lombok, ResponseEntity, CORS, and request mappings.
4. Configured database connection settings using Render environment variables.

Frontend:

1. Built using React.js and Vite and deployed on Netlify.
2. Implemented toast notifications to display messages when tasks are created, deleted, or updated.
3. Used React Router for navigation, React hooks for state management, and reusable components.
4. Configured the backend API URL using Netlify environment variables.
5. Added browser Local Storage to persist the user's light/dark mode preference across page reloads and sessions.

Database:

1. Configured Neon PostgreSQL as a free, cloud-hosted database for persistent data storage.

Maintained Three-Tier Architecture.

What I am most proud of is successfully integrating and deploying all three layers of my first full-stack application in the cloud. Next time, I would focus more on drag and drop functionality, error handling, loading states, and production reliability to provide a smoother user experience, especially when the free hosting services take time to start up.

What challenges did you encounter, and how did you overcome them?

1. Implemented React Router to navigate between All, Active, and Completed task views. Created reusable components and passed props to share task data and mode information between components.
2. Ensured the task list refreshed whenever a task was created, updated, or deleted. I used an onRefresh() callback to trigger data fetching and update the UI instead of using useNavigate() for refreshing data, since navigation and data refreshing serve different purposes.
3. Worked with React hooks and props to manage component state and ensure that the displayed task list stayed synchronized with the latest data fetched from the backend.
4. Integrated the React frontend with the Spring Boot REST API and Neon PostgreSQL database, deploying the frontend on Netlify and the backend on Render. Configured environment variables, addressed routing and connectivity issues, and learned how to troubleshoot deployment-specific problems.

What specific areas of your project would you like help with?

I would like help implementing drag-and-drop functionality to reorder tasks, improving responsive design and media queries for a consistent user experience across mobile, tablet, and desktop screens, and exploring free hosting services that offer faster startup times without long cold starts. I would also like to improve the application's loading experience and overall reliability when using free cloud hosting services.