/translations

A react app using the latest version

Primary LanguageJavaScript

REACT: Lost in Translation

Team sumbission for Front End Assignment 2: Create a Sign Language Translator using React.

Summary

The aim of the assignment was to host our own api and then make a web app using REACT that utilizes said api using REACT.

What we used

We used Figma to create a basic draft of the component tree. We used Railway for hosting the API. On the coding side, we used VS Code. We had the option to use css libraries like Bootstrap for styling but we opted to used pure CSS for practice and learning purposes.

Thoughts / What we learned

Working with REACT was a fresh experience for both of us so it was a good challenge and a valuable learning experience. Besides REACT itself, we felt that hosting the API (initially on Heroku and then on Railway) was a good learning experience. Some more detailed thoughts from each of us bellow:

  • Tasos Antoniou:
    I feel like my main gains are in the following areas:
    1. Class and functional components
    2. The usage of useState
    3. The context
    4. Higher order functions such as mapping, foreach etc
    5. Session and local storage management
    6. Modifying objects and prepare them as arguments for JSON.stringify()
    7. When to use useEffect
    8. Better understanding of the MVC architecture
  • Bill Tsolis:
    In this particular assigment Tasos ended up handling a lot of the actual React compoments. Despite that I do feel like I have a better picture of why such architectures are desired, their benefits and I generally learned enough that I feel comfortable with the idea of builing a REACT based web app on my own. CSS was once again the bane of my existence, not through difficutly of usage but I figured out I really do not enjoy working on it.

How to Run

Requirements

  • NPM

Instructions

  • Begin with downloading/cloning the repo.
  • Navigate to the root folder of the repo and reate a .env file pointing to your own version of the REST API used for the assignment.
  • Use npm start on your terminal of choice(while still in root fodler). The app will open in your browser.

If you get any errors relating to react-scripts or a message that port 3000 refused connection or wasnt found try running npx kill-port 3000 and npm install in the root folder of the app before running npm start again.

Contributors