Image Upload Frontend Using React (WIP)

Overview

This image upload frontend is the frontend of my Ascii Art Project.

Using React, I made a simple image/video upload frontend that connects with my python backend server. The image is processed by the server and returns the uploaded image as an ascii art image. The video is processed by the server and returns an ascii art gif.

Prerequisites

• Visual Studio Code - IDE
• React app
• Axios - Used to talk with the server (instead of fetch())

How to run it (on Windows)

In the command prompt or terminal, go to the directory where the React image-upload-project is saved:

$ cd image-upload-project

In the project directory, run the react app:

$ npm start

It will run the app in development mode.

A new tab in your browser should automatically open with the image upload front end. If it does not, enter http://localhost:3000 in your browser.

Connect to backend server

If you want to connect it to the python backend of my ascii art project, the github link is here: https://github.com/CSprat451/AsciiArt

Status

This is a work in progress. I will periodically update the code to add new features or functionality.

Inspiration

This front end design was inspired by the React File Uploader With Express (Using React Hooks) by Traversy Media YouTube tutorial.