Adrian Anin

Anodyssey is a passion project of mine. It combines two things I love to do: writing and coding. It is a full-stack blog built with the MERN (MongoDB, Express.js, React.js, Node.js) stack. Users can navigate different pages of the blog, which are seperated by the categories of the blog. I built a fully functional CMS (Content Management System) to handle blog content creation and manage and to manage user comments. Users can effortlessly explore various pages of the blog, each meticulously categorized to provide a seamless browsing experience. Whether they're diving into inspiring narratives, tech related articles, or educational content, the blog's structured layout ensures easy access to diverse content. This project has been in the making for a long time, it began as a static HTML page with some CSS and to be able to furnish it with the skills and expertise I have acquired over the months was really satisfying, a full-circle moment. My greatest desire is that users will be inspired, learn something new and perhaps catch a love for writing when they interact with this blog.

Furn is a react based shopping cart web app built with the React Router. Users can navigate between the home and shop pages, view details of a particular product, add a single or multiple products to the cart and increase or reduce the items in the cart. I managed state with the context API in this project to avoid prop drilling. Although not particularly needed for this project I also practiced using the useMemo hook in the cart component to avoid the total price from being calculated each time the cart is opened. I optimized the images on the web page with lazy loading and the ViteImagemin plugin to improve page load times. I tested the app after development with the React Testing Library and Vitest. I also confirmed prop types for each components to avoid potential bugs. I stored the product data in a json file to mimic a database. I styled the app with vanilla CSS and deployed on Vercel. This app was challenging and rewarding to build and reinforced a lot of React concepts I had studied, it was also interesting to learn how testing in React and I hope users can have a good experience using Furn.

Memoji is React memory game I designed and built to practice using the mainly the useEffect hook although I also used useState. It’s derived from two words memory and emoji. I used the axios library to get data from the emoji API. To win, users must click each of the 12 emojis at most once (the emojis reshuffle after each click). After each win, a new set of emojis are displayed and after 3 consecutive losses, new emojis are loaded. One of my main takeaways from this project was the use of a .env file for hiding API keys and integrating that with Vercel. This was a fun and gamified approach to learning and I hope users can create good memories on Memoji.

I built the React cv / resume builder web app to practice using the useState hook in React. Users can create and manage their resumes and save as pdf when ready. There is a default view loaded when the app is first loaded to give users an idea of how the final result would turn out. One feature about React that stood out in this project for me was the need for every list item to have a unique id. I used the UUID library to achieve this behavior. I decided to separate the inputs and display for each section (personal details, work, education, and skills) into their own components to make the code more readable and maintainable. I also styled each component separately, although with vanilla CSS. I also included a localStorage helper function to persist user input in different sessions. I used Vite as my build tool and deployed the app on Vercel. Overall I thoroughly enjoyed building this web app and hope users enjoy using it too!