marktlinn / meme_generator

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

A Meme Generator

#Link to project: https://meme-generation-app.netlify.app/

memeGen

How It's Made:

The project was made in an effort to continue developing my understanding of React. It was a great opportunity to learn a lot more about state and props management in react. In this project I developed a good understanding of useEffect as well as fully integrating fetch requests in React.

Although I'm confident using async code in vanilla JS, it was my first experience building such a project in React and was really fun to build. I also got to flex my React conditionals in this project which was interesting and will definitely be a valuable tool for me going forward.

This was also the first project that I'd used SCSS in, usually I prefer vanilla CSS but wanted to try my hand at SCSS to play with its features. I enjoyed the exprienced.

Tech used: HTML, SCSS, JavaScript, React, Figma, APIs

Optimizations

There's room for a lot of optimizations. My intention was to build an MVP, which is what this project represents. I did add a light and dark mode, as I wanted to just play with React conditionals and state a little more.

The design could definitely be tweaked adn improved. Likewise, adding the optionality to download the finished meme would be a nice option for the user.

It would also be improved by adding text position selection. Some of the memes imported from the API are not simply an image with space for a top and bottom text, sometimes they are more complex images or images that need the text in different positions. So, if the user could choose the text position it'd improve the app.

Lessons Learned:

This was a great opportunity to learn a lot about React: using react to fetch from APIs, how to use state across components, updating state, useEffect to manage side effects, react form elements, how they differ from HTML elements and how to have their state correctly managed by React. I also used React conditionals a lot for class assignments and rendering. Plus it was the first time I've used SCSS, so there were a few things to learn there regarding the possibility to nest selectors etc.

Overall this project was a great opportunity to learn a lot and put those skills into practice. Thoroughly enjoyed making this simple site and I look forward to building on my skills to make more complex sites. I esepecially want to implement React components into other full-stack apps, where its connected to custom built back-ends/APIs

About


Languages

Language:SCSS 48.4%Language:JavaScript 45.5%Language:HTML 6.1%