It starts with a recruiter email requesting my CV. After go through the code challenge, then an idea strikes me. Why not make it a sprint? To sum the workflow during these 9 days: Diagram >> Prototyping >> API mocks >> Coding >> CI/CD setup >> Medium post.
The whole idea of this sprint is to make things(appointment) work, as many aspects of this sprint are not near to production use cases. The purpose of the sprint is to showcase the workflow, process and tools that may benefit future product dev. and it’s possibilities.
Collaborative workflow 🧑🤝🧑
The key here is collaborative, collaborative diagram, design, coding. Allow the different background of the persons within the ecosystem of the product (client, stakeholder, designer, engineer, QA, sales & ops, digital marketer) to discuss, feedback and input towards a better product as the end result. Collaborative may sound messy in the sense that too many inputs, but if it’s managed well and one person who has a better product vision with final decision power, then it can nurtures a well-balanced product.
Day 1
Diagram ✏️
Tool
https://miro.com/
Personally prefer Miro for its the richness of templates and realtime board which encourage the collaborative diagram.
Process
Study the requirements, live site, document the user journey and data model. A well-documented development or diagram able to keep the team not to drift far away from the product vision and purposes. Tactics and strategies may improve or change from time to time, but product vision shouldn’t be always changing.
What is missing
User research, user stories, value proposition canvas.
Result
Day 2~3
Prototyping ✏️
Process
After the study, the flow and current site decided to start with simple screens & components which serve the purpose of making an appointment.
1. Experiment with different colour, typo.
2. Create layouts & components.
3. Discuss and revise.
What is missing
Design system, micro animation, user validation.
Result
https://www.figma.com/file/geHPEtTJHcxhtFQjvbObge/Carsome-demo?node-id=0%3A1
Day 4
API mocks
Process
With the prototype ready, before go into code everything, is better to have a mock API to serve as API documentation. Create mock server under Postman is not hassle and front end developer able to start the coding with mock API.
1. Create mock server.
2. Define API end points
3. Define API’s request and response.
4. Create different use cases of API req/response.
Why API-first matters: https://medium.com/better-practices/api-first-software-development-for-modern-organizations-fdbfba9a66d3
What is missing
API versioning, API test scripts, documentation.
Result
https://documenter.getpostman.com/view/11799120/T17AkBSP?version=latest
Day 5~8
React development 🗒️
Tool
IDE, NPM, Gitlab, Chrome browser, React
Process
1. Clone the React repo had done before.
2. Clean up.
3. Define the folder structures, screens and components.
4. Install required npm packages.
5. Start the process of combining all the components together.
What is missing
Code review, ESLint, error logging, performance logging, analytic tool etc.
Result
https://gitlab.com/carsomedemo/react
NodeJs development
Tool
IDE, Node, Gitlab, Postman
Process
1. Define model according to diagram/mock API.
2. Define route as API endpoints.
3. Code the logic follow as the mock API design, define earlier on.
What is missing
Socket.io for realtime, JWT auth, security, request validator.
Result
https://gitlab.com/carsomedemo/node
Day 9
CI/CD 🤖
Tool
Gitlab-runner, Plesk
Process
1. Setup Gitlab-runner under VPS.
2. Write .gitlab-ci.yml for the deployment workflow/pipeline.
3. Test and revise the deployment script.
What is missing
Docker, Newman, Cypress.
Result
https://gitlab.com/carsomedemo/node/-/pipelines
https://gitlab.com/carsomedemo/react/-/pipelines
Final thoughts 💭
The end product look like:
In future, there’re lots of new stacks to venture, like AR, ML, blockchain, especially ML segment, more and more talent comes up with new idea and product which incorporates the ML behind to enhance the overall experience or help decision maker making optimal decision.
Credit 😃
Credit to all team member who trust me and made this sprint possible in 9 days.
