Opine
Overview
Opine utilizes webhooks to gather information from emails, and send that data through the backend to MongoDB. That data is harnessed on the front-end to show charts of response information.
Goals
The main purpose of this project was to learn how to create a full stack React application, and grow more comfortable with shifting data.
Bumps along the way
There are many pieces to this project. I had to maintain good organization or risk getting lost in the clutter. It was a good lesson in splitting up large files and naming things clearly. In particular, the backend requires several routes for authentication and others for database interaction. I had to learn how to separate these while maintaining the same instance of the Express app across all routes. Keeping the user in mind, I made sure to create paths for the creation, editing, retrieval and deletion of data with mongoose.
Full Stack Implications
A major challenge in building Opine was linking my Node/Express backend to the user facing frontend. I researched two options, either to completely separate, or build together. For this project, I chose to house the whole thing altogether.
One advantage of housing the whole application in one folder, meant I could start both servers to run concurrently with one script. This makes development more efficient. I was also able to deploy the whole application on heroku (as opposed to Movie Quiz or Emma’s which are currently deployed separately). It did require some extra script writing to properly implement, but thankfully heroku has excellent documentation.
Lessons learned
Redux is a major aspect of this application’s structure. I had more than a few missteps with action creators not creating any action, and no update to my state. Specifically, the charting pages were a challenge because I initially wired them up to fetch only one piece of data. Later it occurred to me that it would be nice to be able to shuffle between different polls and compare charts. The rewrite yielded no errors, but also no data. Trial and error finally got my charts up and running. This gave me a much deeper understanding of state.
At a glance
Reusable Components
This modal is an example of how I create reusable components. This particular component was created by using React portal. It is fully customizable. Details, such as title and handler functions, are customized by injecting props, which can be added or removed as needed. Creating reusable components like this helps me to write clean, maintainable code.