Andrew Vlietstra

I'm a

About Me My Projects

About Me

Who am I?

I'm a front end focused developer who loves to learn and build creative projects. In my spare time I enjoy teaching myself more about web development and coming up with new creative ideas. I like to build challenging projects that I can learn a lot from.

Next JS logo Typescript logo CSS3

Projects

Clothing GIF

Adamsco

  • Next JS logo
  • Typescript logo TypeScript
  • Tailwind css logo Tailwind CSS
  • Formsubmit logo

A Next.js app developed for my client Adamsco Sales Agency. Built with Performance, SEO and Accessibility in mind. Utilizes Next.js caching and image optimization for fast page loads. TypeScript for type safety and type checking. Styled responsively with Tailwind CSS. Form submissions are handled through FormSubmit.

See Project View Code
Developer GIF

Dev Event

  • Next JS logo
  • TypeScript Typescript logo
  • MongoDB Mongo DB logo
  • Tailwind CSS Tailwind css logo

Full-Stack NextJS application where users can browse, create, and book events. Server functions handle various API routes, query MongoDB database and return back with Event data. Server-side and Client-side error handling. Styled responsively with Tailwind CSS.

See Project View Code
Books GIF

BookWise

  • Next JS logo
  • TypeScript Typescript logo
  • Neon Neon Postgres logo
  • Redis Redis logo

Library Management System made with NextJS, NextAuth, TypeScript, Neon Postgres Database for storage, and Redis for rate-limiting and DDoS protection. Utilized caching, optimizations, media uploads, complex database queries, error handling and custom notifications. Sign in page is pre-filled with guest credentials for convenience.

See Project View Code
Disney Plus GIF

Disney+ Clone

  • React
  • Redux

Disney+ Clone made using React, manages global state with Redux Toolkit. Styled responsively with Sass and is powered by the TMDB API. Pulls live dynamic data, will always be up to date with popular movies and shows. Implemented search functionality, ability to add items to watchlist, change username and change profile image.

See Project View Code
Crown GIF

Crown Clothing

  • React / Redux
  • Firebase

A Single Page e-commerce shop Application, made using React. React router was also used for routing between "pages". Redux for global state management and Firebase for user authentication. SASS for styling. I also integrated Stripe for test payments when at checkout.

See Project View Code
Weather GIF

Klimate

  • Next JS logo
  • Typescript logo TypeScript
  • React query logo
  • Tailwind css logo Tailwind CSS

A Single Page NextJS Weather App. Gets local weather data based on your location. Fetches data from OpenWeatherMap API via React Query. Caches data to minimize API calls and optimize app performance. Displays a loader during data fetch for better UX. Styled responsively using Tailwind CSS.

See Project View Code
Weather GIF

ThinkBoard

  • React
  • Node js logo
  • Express logo
  • MongoDB Mongo DB logo

A simple Full-Stack app using React for front-end UI, Node.js and Express for setting up a server, API routes and controllers with CRUD operations. Connected to a No-SQL MongoDB database, uses Mongoose ORM to communicate with database. Styled responsively using Tailwind CSS.

See Project View Code
Pokeball GIF

Poké App

  • React
  • Responsive CSS3

A simple React app, that fetches data from a pokemon API endpoint and displays the data of certain pokemon. There is also search functionality and buttons to go to previous or next Pokemon. If you click the Pokemon image you will toggle the shiny version of it to be rendered.

See Project View Code
Money GIF

Nexter

  • Semantic HTML5
  • Responsive CSS3

A real estate website, specializing only in the best realtors. This is my most recent project. This website uses a combination of Flexbox and Grid. But it also implements more advanced CSS techniques, such as creating a responsive grid without using media queries.

See Project View Code
Stocks GIF

Crypto City

  • Semantic HTML5
  • Responsive CSS3
  • JavaScript

A crypto currency exchange/business consulting website. This is my third personal project. I learned a ton about using Flexbox in this project and how to position content on the main and cross axes. As well as flex commands like justify-content and align-items.

See Project View Code
House GIF

Condor Renovations

  • Semantic HTML5
  • Responsive CSS3
  • JavaScript

A home renovations website. This is my second personal project. I learned a lot about using CSS Grid and also how to change its template on smaller screens with media queries.

See Project View Code
Fire GIF

Envision Fitness

  • Semantic HTML5
  • Responsive CSS3

A gym website focusing on health and fitness. This was my first personal project I made. I used basic HTML and CSS techniques such as structuring the web page with rows and columns.

See Project View Code

Front End

  • Next.JS / TS
  • React / Redux
  • HTML / CSS / JS
  • Tailwind CSS

Server

  • Node.JS
  • Express

Database

  • Neon Postgres
  • Mongo_DB
  • SQLite

Deployment

  • Vercel
  • Netlify
  • Git

Why work with me?

There are many advantages to working with me. Here are a few:

Passionate About Development

Big believer in the fact that the greatest work is done by passionate people.

Adaptable

Confident in my ability to learn something new and put it into practice.

Quick Learner

Always excited to learn new things. I thrive on tinkering with new ideas and creative projects.