Team sumbission for Front End Assignment 2: Create a Sign Language Translator using React.
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.
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.
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.
- NPM
- 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.
- Tasos Antoniou @tassosant
- Bill Tsolis @bt001