the simple fundamentals of programming

flashcards and definitions

about

This app shows definitions of fundamental terms to programming and gives simple, accessible definitions. Once signed in, users can add comments to these flashcards. They can also edit and delete their comments.

links

• front-end/production live link, i.e. the actual webiste
• back-end/api repository
• back-end/api live link

set up

To use this open-source repository yourself, clone from GitHub and run these commands to set up a local development environment:

• npm install
• npm start

Use this command to deploy your own site on your GitHub if you've forked and cloned this repository. In that case, ensure you've followed all the instructions in the react-auth-template README to succesfully deploy.

• npm run deploy

Note that I also did install styled-components for React styling with this command:

• npm install --save styled-components

dependencies

• react-auth-template
• styled-components

technologies used

• React
• JavaScript
• HTML
• CSS
• npm (package manager to manage front-end development)
• various production and development node modules viewable in package.json
• various backend technologies (see back-end repository for more info)

unsolved problems

• fix vulnerabilities by patching all node modules & technologies to latest versions

planning

I created detailed wireframes(1 and 2), as well as user stories and an ERD.

process & problem-solving

I set up my Rails API first and deployed it on Heroku. I tested the endpoints locally and on Heroku using Postman. Then, I built with React for a few days, getting used to the syntax and the new way of thinking with a declarative paradigm.

After nearly finishing my app, I got stuck trying to create a component within a component in order to perform deletion of a resource. I was having issues with managing props and state. I decided to take a step back.

Then, I read all the React Main Concepts documentation slowly and methodically. Then I read most of the React Hooks documentation.

Then, I rearchitected my app based on the Thinking in React documentation. I made multiple React component hierarchy wireframes/diagrams showing what I had done, what I had tried, and what I was going to try.

Then I got back to coding. It ended up working out. So the study and refactoring was incredibly worth it for my understand of React as a whole. I feel really comfortable with the main concepts of React and am looking forward to building with React again.