Full demo code here

When I create portfolio websites for myself and friends, I always want to avoid hardcoding the projects and information for each and instead use a more dynamic way of managing the data, but haven’t developed a way until recently. This is the system I’ve developed to allow the dynamic instantiation of web pages and their content from a single JSON data structure, making it easier and cleaner to edit the information later on.

Organize the data

I first organized the content I wanted to display in a JSON data structure in the following way:

Full demo code

Making p5.js sketches is incredibly fun and is an amazing tool for creative coding. However, while p5.js themselves show how to embed a sketch in pure html, it’s not clear how to embed one in a React app since the <script> tag doesn’t work the same way in a React component. Here’s how I figured out to do it:

Make a p5.js sketch

I use their online editor to develop and run mine. Put the sketch in a file in the same directory as index.html, I named the file sketch.js.

Import p5.js

Add the following code in index.html within the <head> tags

Whenever I start a new React project I always have the same setup - run Create React App, create a GitHub repo, initialize the local repo, tediously and manually copy over all my usual dependencies and config files, and push it to the GitHub repo. But when I have a new idea I just want to get to the development as fast as I can - so I automated it to get started on brand new projects in seconds.

First, create a template

I ran Create React App and manually copied over all my dependencies and config files - such as Webpack, Babel, React…

What did you like the least about the class?

The disconnect between class and projects felt too extreme to the point that it wasn’t aiding in my learning. I had no clue if I was following good practices while while working on projects and I feel that spending some time talking about broad SWE principles in class would have been really helpful.

What did you like the most about the class?

The material was the most relevant I have ever learned at college. …

What did you do this past week?

I’ve spent the past week refactoring and making lots of UI changes cross the site. I’ve cleaned up styles, implemented more consistent styles, replaced all imported components with bootstrap components, and got rid of UI bugs.

What’s in your way?

Since this phase is mainly about refactoring I’m not dependent on anyone else to complete work I don’t have anything in my way and am able to work at my own pace.

What will you do next week?

Now that I’ve finished making the much needed UI refinements across the site, I’m focusing…

What did you do this past week?

This past week I made our site entirely mobile friendly as well as implemented the majority of the sorting, filtering, and searching UI for our frontend. I also added the splash search and a new splash search page to display the results of the search on. …

What did you do this past week?

I started building the search functionality in the front end this week. I ended up using a library to get a nice search bar component and embedded that on our splash page and the list pages.

What’s in your way?

Nothing is blocking me but I have some learning ahead in order to figure out how to build drop down menus and a whole UI for sorting in filtering with components such as sliders and checkboxes.

What will you do next week?

This next week is focused on building the front end with…

What did you do this past week?

I primarily worked on the recent phase of our project that was due. My own responsibilities consisted of managing the team, ensuring everyone was on track to finish their work and that all the work was assigned and being taken care of. I also spent a lot of time in coding the front end of the website almost entirely by myself. …

Are you and your family safe and sound where you are?

Yes, my family is all together back home but I decided to stay in Austin in order to be around my housemates. I spent some of the break with family but I know I’ll be more productive and feel better if I’m in Austin and around people my age.

How do feel about your ability to finish the term completely online?

I feel like I’d definitely learn better in person but I’m not too worried about this semester because my professors have been accommodating and made adjustments to the…

What did you do this past week?

In the past week I’ve been mostly focused on python and studying for the test since the material differed so much from the projects and I felt ill prepared for it. However I’ve also spent some time cleaning up our code from phase 1 and implementing better coding and styling practices. …

Abhi Velaga

Software Engineer at Visa and Computer Science Graduate from UT Austin // abhi.work

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store