Project Goals
Our project subject was 'Learn a new thing'. As a team we decided the focus of the two weeks would be the learning process, and not a focus on a final product.
Personal Project Objectives:
- To be able to shift personal focus from outcome to learning and deep understanding
- To learn how to use react, and understand the framework well
- To build a simple app using the MERN stack and understand each component individually
- To be comfortable setting up and creating a web app using the MERN stack
- To be a better developer than yesterday
- To have fun
Out of this we came up with the following idea:
A Guide on How to Build an [Tin-Dev] App using MERN
The MVP interaction : A user will read our blog to understand our process of learning how to use MERN, Including what we learnt, how we did it.
How we did it
Day 1
Lots of group discussion around ideas, working practices, and objectives. Decisions made on what we wanted to learn, our objectives for the weeks, and any focuses the group had.
Key Question raised :
WTF is MERN?
Decision made that prior to jumping into the code we should all do some individual learning on each part of the stack. None of us had a clear idea on what MERN is, what each part of the stack does, what is is responsible for, or how they communicate.
Decision made to complete individual research and contribute to a group working document. Met up again at the end of the day to discuss our findings.
Pooled shared learning and came up with a key information sheet about each individual component - the stack as a whole - and how each fits the MVC architecture that we each have experience with.
Day 2
Created key learning sheets - with our new found knowledge decided to complete some modules to meet the following objective
Key Objective
Hello world with MERN stack
Grouped as pairs to run through tutorials to try and get a MERN stack hello world program working. Each pair had different tutorials and different levels of success. As energy waned in the day we decided to group together to get an environment set up to for our Dind'r app.
Also created user stories for our dind'r app and a repo - https://github.com/Leigan0/DINDR
Objective met - we could create 'Hello world' with MERN stack
Day 3
Discussed progress as a group - decided we all do not feel fully comfortable with how key components in the stack communicate. Kind of understand express as an API, and know it talks to react, but not fully sure how this works and what react can do. Each team member different knowledge and understanding. Approach decided to carry on with tutorials, but attempt to apply these to our models.
Some group members felt anxious by the fact we had no real code towards our app, some group members felt more value in gaining deeper understanding of whole stack.
Key Objective
Become more comfortable with REACT, and how it works with express
Some group members wanted to work with the set up created in day 2 - and see where they can take this.
Documentation created on step by step guide on how to set up environment to create React app.
A tutorial suggested using Postman to check your API calls - which helped me visualise the interactions between the two. Because of this I thought it would be a good idea to add a section on how to Postman - and what I learned.
Day 4
Some of us felt we understood how the different parts of MERN fit together, and some still wanted to understand better.
To focus, we agreed specific research areas for the morning:
Axios, for communication between Express and React
Jest for React testing
Implementing Babel (to run JavaScript properly in the browser) and WebPack (a build tool)
Review Sam's React+Express tutorial
Afternoon - we broke off into pairs to 1/start testing with Jest and 2/ build a new app from scratch (no generated files)
New tech we've been exposed to today: Jest, WebPack, Babel, Mongoose.
Retro at the end of the day to discuss what we felt was working and what was not with actionable plans for Friday.
Some of the team felt anxious about the fact we had very little code towards our MVP, and the focus was on the writing of a book and not on the code.
Some felt the learning process had to been going well and it was an inevitable part of the project.
The actionable plan was developed to improve group work flow and feeling.
Day 5
Start putting some of learning into code action
Agreed to focus on getting some code down. Whilst book and tutorial writing has been going well, all feel it will be good to put some of this into practice.
The group had now been able to build the stack from scratch without using generate / scaffold commands. Big step forward.
Agreed for a pair to get to grips with jest and testing. Two pairs focus on react front end.
Agreed that we would like to learn react, so felt we would focus on getting to grips with the front end framework, rather than learn the testing and then build the app. None of the group felt comfortable writing tests when they could not visualise the code.
After a morning writing jest, the back end tests became much more understandable, and new found group confidence in writing back end tests for the app - however very brittle. At this stage agreed better than nothing.
After afternoon of pairing, the front end (REACT) was also starting to come together. Able to build a form to post to the database, and a home page which lists users from database. These crucial steps gave us a new found confidence and eased some of the earlier week stresses.
At the end of the day we had made a lot of progress towards our MVP - front and back end speaking to each other and displaying.
Agreed to write issues and and pick an issue to work on over the weekend if we had time.
Weekend work
Some good progress made - individual team members all worked on the app.
- Implemented search function end to end
- Researched how to upload photos to database
- Researched how to handle routing in react
- Implemented viewing individual profiles end to end
- Implemented liking a user end to end
Day 7
WTF happened over the weekend??
Met on Monday for a stand up and meeting for code review. Lot of learning and progress made over the weekend, so we agreed to all give ourselves a congratulations. As focus of project was learning new stack, and majority of work done alone agreed to have a thorough code review to share learning. Techniques used:
- Code reviewed and person who did not write the code explained the code
- Code explained by the writer and questions asked
- Diagrams of flow through code
- Outlined steps taken
- Shared all resources used over the weekend - tutorials / links / each others work
- Merge conflict solutions suggested by someone who did not author the code
We felt this worked well and all had a good understanding of the code person.
Group meeting after lunch to discuss next focus. Agreed to focus next 24 hours on achieving the features we wanted in our app, and put documentation on back burner. Group decision of this focus, and whilst learning project agreed to consolidate day after.
MVP met!!
Paired after lunch each pair working on chosen feature.
Day 8
Feature freeze day! Agreed to finish the final features and work on cleaning up code. Team meeting held to evaluate our progress.
Basic MVP met with additional features and feature freeze decided by midday.
Success!
Agreed that some team members have stronger understanding of various areas of MERN stack.
As focus of the project is learning agreed a plan to get this back on track, and discussed focus for implementation.
Plan made to focus on app styling and work on documentation. Each person will pick a blog topic, and write a blog.
Also agreed each team member to for pick a weakness, and talk the subject over with a team member who felt stronger to aid our learning.