Skip to content

will-j-c/react-hello-world

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

491 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hello World - front end

About

Hello World is an app where like minded people can come together to share project ideas, meet new and interesting friends and find contributors for their projects. It's Linkedin for developers!

Links

Server - https://express-hello-world-zmw.herokuapp.com/

Front end - https://hello-world-zmw.netlify.app/

Tech Stack

In the frontend, the tech stack was:

  • React - Main framework
  • React Router - used for FE routing
  • Material UI - A library for react with many pre made components
  • SASS - For CSS
  • JSON web token - For encrypted data sending
  • GSAP - For the animation
  • Axios - for making the API calls

Planning and Execution

The team initially suggested ideas to each other until we had a list to choose from. Once we had settled on Hello World, we had a planning session at GA campus where we mapped out features and drew basic wire frames on the whiteboard.

With the white board session done, the routes and data schema were designed to incorporate the views and features that had been designed.

We then spent a solid week on designing each view in figma and getting the flow and styling correct.

The back end was then prioritised, being substantially completed in one weekend to leave plenty of time to build the front end.

Front end works took approximately 1.5 weeks to complete and was significantly more difficult than initially expected. MUI has quite a steep learning curve and react state management would prove to be very tricky at times.

Issues faced

  • Image uploads - The whole process of getting images uploaded and creating a decent user experience was painful. Thoughts for next time is have one person do the image front end and backend as this would save time.
  • State management - There were numerous issues where state not updating immediately caused issues (such as image upload, checkboxes etc). Further practice is required to better understand when and where state will misbehave.
  • Scope - Looking back on it now, the project was ambitious for 2.5 weeks. There are a lot of moving parts and it required much more time than expected to get everything set up.

User stories

  • Users can create an account and login
  • Users can create a profile and edit their profile with various information.
  • Guests can view projects and search projects before signing up
  • Logged in users can create projects, create contributor roles for those projects and edit/them them accordingly.
  • Logged in users can discuss a project using the comments section of each project.
  • Users can follow each other, follow projects and apply for contributor roles within projects.
  • Users can logout.

Initial concept images

Concept images can be found at https://www.figma.com/file/h5oEoEXdhu67xMLLpK1FQ7/HelloWorld?node-id=63%3A243

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages