Yufan-Portrait

Welcome! I am...

Yufan Xu
Web Developer

I am a full stack web developer with a focus on frontend development. To pursue a previously unexplored interest in coding, I completed Career Foundry's Full Stack Web Development program, where I learned through hands-on projects the fundamentals of JavaScript, Python, NoSQL, related frameworks and libraries like React, Angular, Node.js, Django, and more.

I am based in San Francisco, CA and seeking opportunities to further develop my coding skills in the area or open to remote as well. If you have an opportunity for me, or are interested in connecting, please feel free to reach out! I look forward to speaking with you!

View my resume

See My Work Get In Touch

Toolbelt

Android Studio logo Angular logo AWS Lambda logo Bootstrap logo CSS3 logo Cucumber logo Django logo Firebase logo GitHub logo Heroku logo HTML5 logo JavaScript logo Jest logo jQuery logo MongoDB logo MySQL logo Node.js logo pandas secondary logo PostgreSQL logo Postman logo Puppeteer logo Python logo React logo REST logo SQL logo TypeScript logo Visual Studio logo
Android Studio logo Angular logo AWS Lambda logo Bootstrap logo CSS3 logo Cucumber logo Django logo Firebase logo GitHub logo Heroku logo HTML5 logo JavaScript logo Jest logo jQuery logo MongoDB logo MySQL logo Node.js logo pandas secondary logo PostgreSQL logo Postman logo Puppeteer logo Python logo React logo REST logo SQL logo TypeScript logo Visual Studio logo
JavaScript React Angular Bootstrap CSS HTML5 Node.js Express MongoDB SQL NoSQL PostgreSQL Google Firebase Google Firestore jQuery Visual Studio Postman Passport Parcel Recharts Jest Cucumber Puppeteer AWS Lambda React Native Python Django pandas matplotlib WhiteNoise Cloudinary JSDoc TypeDoc TypeScript Android Studio REST API

About Me

My Background

I was born in the city of Taishan in China, but I grew up in San Francisco after my family immigrated here when I was two years old. For me San Francisco is home, and I love its diverse people and beautiful parks, so I have returned to the city after college.

I studied Business Administration at Northeastern University and then went on to pursue a business career that led me through a wide range of industries and work environments. My curiosity and eagerness to learn has brought me to make a big decision in my career - switch paths and enter the field of tech.

Why Web Development

image-of-computer

My first exposure to coding was in a programming class back at Lowell High School. The memory is hazy, but we worked on coding tasks, including simulating a dice and recreating classic games like Minesweeper, Asteroids, and others. I remember it as a fun class with its annoying bits of debugging, but at the time I did not see it as a career choice ... but things change in life.

After exploring business for several years, I thought more and more about doing something else. I realized that I am better suited to working behind the scenes, especially behind a computer. I came across the Web Development program with Career Foundry and decided to go for it. I find peace in solving puzzles, and there are many puzzles to be encountered in the field of web development. Although frustrating at times, it would be rewarding when it is finally resolved. I enjoy building things and seeing the results of my work, which is why after getting exposed to both front and back end services, I am seeking to focus on the front end, at least in the beginning of my new career.

My Interests

view from Mount Tamalpais

Outside of work, I enjoy solving puzzles (jigsaw, word, number, and logic puzzles), hiking, bouldering, and listening to music. Hikes with nice views of mountains or water (waterfalls, rivers, streams, lakes) calm me (fun fact: this helped inspire the AI-generated design of the favicon and logo I used in this portfolio).

I also love traveling and wish to do more of it, and relatedly I find it fascinating to learn about different cultures and languages. Maybe part of the reason why I am interested in coding is because it is like learning a new language and there are many problems (think puzzles) waiting to be solved. As someone with a strong growth mindset, I am excited by the fact that there will always be more for me to learn in this field no matter how experienced I become.

Work

Recipe App (Web)

A web application version of a recipe app, where users can register for an account, which can then be used to browse and share their own recipes with other users. This project was built using Django, PostgreSQL, Cloudinary, and more.

Recipe App (Web)

This is a fully fledged web application version of the recipe app with multiple users and an admin panel built using the Django web framework. It utilizes a PostgreSQL database hosted through Koyeb and a third party app (Cloudinary) to serve media files in production.

Features

  • Allow for user signup, authentication, login and logout.
  • Allow authenticated users to create, update, and delete their own recipes.
  • Automatically rate each recipe by difficulty level based on ingredients count and cooking time.
  • Allow users to search for recipes according to name and/or ingredients.
  • Display statistics and visualizations based on trends and data analysis.
  • Display more details on each recipe on user selection.
  • Allow users to view the profile page of other users, including that user's recipes.
  • Include a Django Admin dashboard for working with database entries.
Python Django JavaScript HTML CSS SQLite3 PostgreSQL pandas matplotlib WhiteNoise Cloudinary Koyeb pip virtualenvwrapper

myFlix Client (React)

React version of the client-side of the myFlix movies project, built based on its existing server-side code (REST API and NoSQL database). Users can create a profile, browse details about movies, and save movies to their list of favorites. This project was built using the React framework, React-Bootstrap, Parcel, and more.

myFlix Client (React)

React version of the client-side of the myFlix movies project, built based on its existing server-side code (REST API and NoSQL database). Users can create a profile, browse details about movies, and save movies to their list of favorites.

Features

  • Allow users to register with login information, email, and date of birth.
  • Allow authenticated users to view all movies retrieved from database, displayed as movie cards with limited details [main view].
  • Allow users to view the details of a single movie in a single movie view, including movie titles, images, description, genre information, and director information.
  • Allow users to filter movies by genre (dropdown menu) or by movie title (typing in a live search bar).
  • Allow users to add or remove a movie to/from their list of favorites.
  • Allow users to view all their favorite movies on their profile view.
  • Allow users to update their user information (username, email, birthday, and/or password) or delete their account.
React React-Bootstrap Parcel Netlify JavaScript HTML SCSS

Meet App

A serverless, progressive web appplication (PWA) that fetches and displays data from the Google Calendar API so users can search for and see details about upcoming events in their city. This project was built using a test-driven development (TDD) technique.

Meet App

A serverless, progressive web appplication (PWA) built with React using a test-driven development (TDD) technique. The application fetches and displays data (including data visualization in form of charts) from the Google Calendar API so users can search for and see details about upcoming events in their city.

Features

  • Users can filter upcoming events by city.
  • Users can choose to show or hide event details for individual events.
  • Users can specify the number of events to display at once.
  • Users can use the app when offline with limited functionality.
  • Users can view charts visualizing event details.
  • Users can add an app shortcut to their device home screen for quick access.
JavaScript React Recharts Jest Cucumber Puppeteer AWS Lambda OAuth2 Google Calendar API HTML CSS

Chat App

A mobile app with a chat interface that allows users to send text messages, images, and share geolocation with others once inside the chatroom. This project was built using React Native, Gifted Chat, Google Firebase, and more.

Chat App

A mobile app with a chat interface that allows users to send text messages, images, and share geolocation with others once inside the chatroom. This is a native app built using React Native that stores chat data both locally and in the cloud.

Features

  • User can enter chat room after inputting a name to be displayed and a background color for chat room.
  • Chat room is displayed in a familiar format with an input field for sending messages.
  • Users can send images from their device's image library or by taking an image using the device's camera (after authorizing app access to the device's camera or library).
  • Users can share their location to the chat (after authorizing app access to the device's geolocation).
  • Users can access previous messages even when offline.
React Native Expo GiftedChat Android Emulator Google Firestore Google Firebase Expo ImagePicker API Expo Location API react-native-maps

myFlix API

The server-side component of the myFlix movies app that stores information about movies and user profiles so users can access information about different movies, sign up for an account, update their information, and create a list of their favorite movies. This project was built using Node.js, Express, MongoDB, and more.

myFlix API

This REST API is the server-side component for the "myFlix" movies application. It interacts with a NoSQL database, providing users with access to information about different movies, directors, and genres. The API incorporates user authentication, authorization, and data validation logic to maintain data security and integrity. API endpoints were tested using Postman to verify performation and functionality.

Features

  • Users can register for an account and login with login credentials to access app further.
  • Users can retrieve a list of all movies in the database.
  • Users can select to retrieve the details of a single movie, a single director, or single genre.
  • Users can update user information in the database.
  • Users can add or remove a movie to/from their list of favorites.
  • Users can unregister (delete) their account from the database.
JavaScript Node.js Express MongoDB Mongoose Passport body-parser express-validator Postman Heroku CORS HTML

myFlix Client (Angular)

Angular version of the client-side of the myFlix movies app where users can create a profile to view data on movies, including movie title, synopsis, genre, and director. Users can also update their profle and add movies to their favorites. This project was built based on its existing server-side component using Angular, TypeScript, Angular Material, and more.

myFlix Client (Angular)

Angular version of the client-side of the myFlix movies app built based on its existing server-side code (REST API and NoSQL database). Users can create a profile to view data on movies, including movie title, synopsis, genre, and director. Users can also update their profle and add movies to their favorites.

Features

  • Allow users to register with login information, email, and date of birth.
  • Allow authenticated users to view all movies retrieved from database, displayed as movie cards with limited details.
  • Allow users to view the details of a single movie, including movie titles, images, description, genre information, and director information.
  • Allow users to add or remove a movie to/from their list of favorites.
  • Allow users to view all their favorite movies on their profile view.
  • Allow users to update their user information (username, email, birthday, and/or password) or delete their account.
Angular TypeScript Angular Material TypeDoc HTML SCSS

Recipe App (CLI)

Command line version of a recipe app that allows users to view, create, modify, and delete recipes. Users are also able to search up recipes based on ingredients. This project was built using Python, MySQL, and more.

Recipe App (CLI Ver.)

Command line version of a recipe app that allows users to view, create, modify, and delete recipes. Users are also able to search up recipes based on ingredients.

Features

  • Users are presented with a menu of actions to select from that loops back after each action until user quits the application.
  • Users can create and store a new recipe with parameters - name, cooking time, ingredients, and an automatically calculated difficulty level.
  • Users can view a list of all recipes in the database.
  • Users can search for recipes that contain one or more ingredients (specified by the user).
  • Users can edit an existing recipe (options to edit its name, cooking time, or ingredients).
  • Users can delete an existing recipe from the database.
Python MySQL SQLAlchemy toolkit(ORM) virtualenvwrapper pip

Pokedex App

A simple app that fetches data from an external API and provides details about the original 150 Pokemon, including name, image, height, weight, and type(s). Users can also search for a Pokemon by name. This project was built using JavaScript, jQuery, Bootstrap, and more.

Pokedex App

A simple app that fetches data from an external API and provides details about the original 150 Pokemon, including name, image, height, weight, and type(s). Users can also search for a Pokemon by name.

Features

  • Fetches and displays a list of Pokemon from external API in the form of clickable buttons.
  • Users can click on a Pokemon button to display the selected Pokemon's details in a popup modal.
  • Users can click on the close button or anywhere outside the modal to close it.
  • Users can filter Pokemon by typing in the input field (live search by name).
JavaScript jQuery Bootstrap CSS HTML

Contact Me

I am based in San Francisco (able to commute) and open to remote roles.
Feel free to connect with me through emaiil or on LinkedIn!

Yufan Xu
San Francisco,CA

Email: [email protected]
LinkedIn: yufanxu
View my resume