Similar presentations:
Strivers a social network & a service for tracking athletes' exercise
1.
Striversa social network & a service
for tracking athletes' exercise
Elukashova
TrickyPie
MatthewTheWizzard
2.
The Big Bug Theory teamElena
Lukashova
Anastasia
Klimova
@elukashova
@TrickyPie
Team lead,
Backend,
Front-end
Front-end,
Design,
Google Maps API
Mikhail Matveev
Front-end,
Translation
@matthewTheWizzard
3.
Project Idea4.
Project Idea- Let's make a clone of
Strava - a huge web
application for athletes
in which you can record
your workouts, view
performance statistics,
participate in challenges,
interact with other
people’s posts and track
routes on the map?
- I’m in!
“
“
- We need something not too
complicated...
5.
The idea seemed ambitiousto us, and we understood
that implementing such a
project
mean facing
manywould
difficulties
6.
“It sounds exciting. Let’s go!”7.
For our project, we selectedfeatures and functionalities that
could be assembled into a single
logical application.
8.
FlowchartNot all team members
were familiar with the
application, so a
flowchart was created
to help them orienting.
In the beginning, it
looked like this...
9.
…and then like this.10.
…and finally, likethis.
It still looks
like
a lot!
11.
Tech stack12.
BackendFrontend
13.
USERJOURNEY
14.
1Login/
Signup
15.
Login & SignupThe journey starts with
registration and login
For the convenience of
the user, it is possible
to log in with his/her
Google account.
16.
Login & SignupAll fields are validated
on both front-end and
back-end sides.
And successful login, the
user is redirected to the
Dashboard page.
17.
2Dashboard
1
Login/
Signup
18.
Default view of Dashboard19.
Full user profile20.
21.
22.
23.
24.
25.
26.
Own postFriend’s post
Delete the post
Static Maps
API
Add kudos
Add comments
Unfollow the frien
27.
28.
29.
30.
A maximum of threechallenges the user
has subscribed to,
with an indication
of the progress
31.
A maximum of threechallenges the user
has subscribed to,
with an indication
of the progress
Suggesting three
random users you
are not following
yet.
32.
33.
A maximum of threechallenges the user
has subscribed to,
with an indication
of the progress
Suggesting three
random users you
are not following
yet.
Link to adding a
new activity
34.
2Dashboard
1
Login/
Signup
3
Add
Activity
35.
Add activityConsists of
training inputs and
maps.
The inputs can be:
-
Fill in manually
-
Remain empty and get
default values after
saving the activity
-
Get data from map
route
36.
37.
Displays the map accordingRemoves the
to the current geolocation
markers and the
route
38.
Displays the map accordingRemoves the
to the current geolocation
markers and the
route
If the route can’t be built
39.
The map and the routechange dynamically when
you select a sport
activity.
40.
The map and the routechange dynamically when
you select a sport
activity.
41.
The map and the routechange dynamically when
you select a sport
activity.
This is how the map
looks like when you
choose “walking”,
“running” or “hiking”.
In this case, the inputs
associated with the map
are recalculated.
42.
2Dashboard
1
Login/
Signup
3
4
Add
Activity
Add
friends
43.
Find Friends44.
Search by nonfriends ** no points were requested for this feature
45.
Search by nonfriends *You can follow and
unfollow
a user right there.
* no points were requested for this feature
46.
Search by nonfriends *You can follow and
unfollow
a user right there.
Number of user
activities
* no points were requested for this feature
47.
Search by nonfriends *You can follow and
unfollow
a user right there.
Number of user
activities
Paginatio
n *
* no points were requested for this feature
48.
2Dashboard
5
Challenges
1
Login/
Signup
3
4
Add
Activity
Add
friends
49.
Challenges50.
Filter challenges ** no points were requested for this feature
51.
Filter challengesAccept / reject the
challenge
52.
Filter challengesAccept / reject the
challenge
Avatars of 3 friends,
participating in the
challenge
Total number of
participating friends
53.
Filter challengesAccept / reject the
challenge
Avatars of 3 friends,
participating in the
challenge
Days
until
the end
of the
challenge
Total number of
participating friends
54.
26
Dashboard
5
Settings
Challenges
1
Login/
Signup
3
4
Add
Activity
Add
friends
55.
Settings56.
SettingsAvatar changing
All fields can be
filled
All fields are
validated
57.
SettingsAvatar changing
All fields can be
filled
All fields are
validated
Account deleting
58.
TranslationThe i18next framework
was used for translation
in our project.
The advantage is that it
has a built-in
eventEmitter and the
ability to select a
translation depending on
the context.
59.
The work was complicatedby the translation of dynamic
elements such as dates,
times and quantities, as
it was necessary to
consider the singular
and plural forms, as
well as declension.
60.
DesignProcessed screenshots for layout
creation
Final design
61.
DesignProcessed screenshots for layout
creation
Final design
62.
The design of the original Stravais neat and concise.
We wanted to make the application
design simpler and less serious.
For this, round elements were
used, and bright well-matching
colors were chosen.
Montserrat
63.
There are two types of people64.
There are two types of peopleThose who love the light
and those who burn their eyes with it.
65.
Dark theme66.
Dark themeMy respect!
67.
Backend68.
Data structureComments
User
Activity
Kudos
Follows
Route
Likes
69.
DifficultiesStructure the data
in advance
What information and
in what form we will
store on the server
70.
DifficultiesStructure the data
in advance
Filtering and structuring
the server response
What information and
in what form we will
store on the server
What data is needed,
what is not, getting
rid of unnecessary
nesting of the
response tree
structure
71.
DifficultiesStructure the data
in advance
Filtering and structuring
the server response
Relations between tables in
Prisma scheme
What information and
in what form we will
store on the server
What data is needed,
what is not, getting
rid of unnecessary
nesting of the
response tree
structure
When to use one-toone, one-to-many,
many-to-many
relations.
72.
Workorganization
73.
RACI matrixR - responsible
A - accountable
C - consulted
I - informed
@elukashova
@TrickyPie
@matthew
Организация командной работы
R/A
С
С
Настройка проекта
R/A
I
I
Back-end
R/A
I
I
Design & adaptive
A
R
I
Routing
R/A
I
I
Create components
C/A
С
R
(Login, Signup, Dashboard)
C/A
C
R
Create layouts
(all other)
C/A
R
C
Login & Signup page
R/A
I
С
Dashboard page (left side)
R/A
I
I
Dashboard page (feed – show post)
C/A
I
R
Dashboard page (feed – likes, comments,
R/A
I
I
delete)
R/A
I
I
Dashboard page (right side – friends)
A
R
I
Dashboard page (right side – challenges)
R/A
I
I
Settings page
A
R
I
Challenges page
A
R
I
Find Friends page
C/A
C
R
Add Activity page – form
A
R
I
Add Activity page - map
C/A
C
R
Create layouts
74.
Work organizationof our team
3
2
Discord
discussions
Calls
4
Mentor’s
Advices
5
Codestyle
1
Kanban board
6
PR & Codereview
75.
Kanban board in Trello76.
Highpriority
Medium
priority
Low
priority
Topics
to discuss
77.
Highpriority
Medium
priority
Low
priority
Topics
to discuss
78.
Highpriority
Medium
priority
Low
priority
Topics
to discuss
79.
Discord chatsDiscussions
Everyday tasks status
Bugs to fix
PRs waiting for approvals
80.
CallsIn addition to daily
written statuses, the team
called up once a week.
Calls were designed to show
how certain features should
or shouldn’t work.
81.
Mentor advicesAdvices and help
Code review
82.
Mentor advicesAdvices and help
Code review
83.
Mentor advicesAdvices and help
Code review
84.
Mentor advicesAdvices and help
Codereview
85.
Code styleEach branch is a mini-task that
reflects the nature of the
problem it solves (fix, feat,
refactor) and the subtask for
which the code is being written.
Within each branch, the commit names
follow the standard naming rules. For
example, commit ‘refactor: add temporary
styles’
86.
PR & Code review87.
PR & Code review88.
PR & Code review89.
PR & Code review90.
PR & Codereview91.
Github statistics92.
Difficulties93.
A lot of conflicts inbranches
94.
Numerous conflicts inbranches
we tried to divide
the areas of work as
much as possible and
to pull the changes
frequently
95.
Didn't discuss the folderstructure in advance and
it was chaotic
96.
Didn't discuss the folderstructure in advance and
it was chaotic
A week and a half
after the start of
the project, we
reorganized the
folders
97.
Adding and changing thecode of components could
break already made
features
98.
Adding and changing thecode of components could
break already made
features
We tried to check
such bugs immediately
when changes are made