Learning, Debugging, and Deploying: My first Full-Stack Experience

Software engineering is not a bed of roses as some might imagine; it's more of a marathon of experiences. I've faced my fair share of bugs, headaches, all-nighters, and sleepless nights, to name a few. Recently, I started learning React through the App Academy Open curriculum, and I must say, it’s nothing short of the App Academy experience—tough, mind-puzzling, and at times, almost defying physics.

In this article, I want to share a problem I faced recently and how I solved it.

The problem

The problem was with the final full-stack project (MERN) in the open curriculum. The requirements were to use Redux for state management, PostgreSQL for the database, and Heroku for hosting (which is no longer free).

Upon getting to the project repo, I carefully read through the requirements. It was a phased project scheduled for 8 hours, but I confess, it took me 16 hours to complete (double the time 😅).

I created a root folder named `authenticate_me` and added two subfolders, `frontend` and `backend`. I then initialized a new Git repository and an NPM project within the root folder.

Phase 1: Setting Up the Backend

The backend stack used is Express.js and Sequelize as the ORM. This was my first time using PostgreSQL with Sequelize; we almost always used SQLite3 for practice and projects. I thought it would be simple—just change a few details in the config file from SQLite3 to PostgreSQL.

After reading the PostgreSQL docs and asking ChatGPT for help, I set up PostgreSQL properly, created a user and a DB, but the issue arose when my app needed to connect to the running PostgreSQL instance. I encountered an "ECONNREFUSED" error, indicating my server was refusing a connection to port 5000. After 30 minutes of Googling, I found a blog that suggested the "pg" module (which Sequelize depends on to connect to PostgreSQL) requires the port the PostgreSQL DB is running on. I updated my `.env` file and server config to reflect the new changes, and it worked.

Phase 2: Setting Up the Frontend with Redux (No Toolkit)

Next, I tackled the frontend. I initialized a new React app in the `frontend` folder and followed the instructions carefully. Although I understood how Redux works (using a single POJO to store different slices of state, immutability, reducers, etc.), I was stumped when it came to creating a new Redux action dispatched upon user login. Redux doesn't allow asynchronous actions directly, so I turned to ChatGPT again. It suggested Redux Thunk, which I had heard of but forgotten about. I wrote a new thunk action creator, and it worked.

Phase 3: Deployment

The curriculum suggested deploying to Heroku's free tier, which is no longer available. I discovered Render, which still has a free tier and can do almost everything Heroku does. I'm used to hosting my backend as an API and calling it from my frontend, but this project required hosting both on the same server.

Following the Heroku instructions, I built my React app to serve the build version on routes not found on my Express server. However, Render doesn't provide a CLI like Heroku. I hosted my project on GitHub, signed in to Render, opened a new web service, selected my repository, and received an error about the missing build command. I added a `package.json` in the root, configured it to build the React app in the `frontend` folder, and start the server in the `backend` folder. The project built successfully, but I encountered a console error: "No user model in the PostgreSQL instance."

Without a CLI to run migrations, I found the post-build instructions in Render, which are only available for pro subscribers. I then tweaked the build command to migrate the DB using Sequelize during the first build and build the React project and start the server on subsequent builds.

Here's the project requirements and my finished solution repository.

Conclusion

This wasn't a perfect solution, but getting a working solution is better than none. If you have a better workflow or know of a host that allows DB migration and seeding, please share for our next project by HNG Tech and App academy Open.

This challenging experience sparked a desire in me to explore and learn more, leading me to apply for the HNG internship, and I was accepted. The experience and energy so far have been great. I'm determined to make it through the internship and will share my journey here.