Strivers a social network & a service for tracking athletes' exercise

1.

Strivers
a social network & a service
for tracking athletes' exercise
Elukashova
TrickyPie
MatthewTheWizzard

2.

The Big Bug Theory team
Elena
Lukashova
Anastasia
Klimova
@elukashova
@TrickyPie
Team lead,
Backend,
Front-end
Front-end,
Design,
Google Maps API
Mikhail Matveev
Front-end,
Translation
@matthewTheWizzard

3.

Project Idea

4.

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 ambitious
to 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 selected
features and functionalities that
could be assembled into a single
logical application.

8.

Flowchart
Not 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, like
this.
It still looks
like
a lot!

11.

Tech stack

12.

Backend
Frontend

13.

USER
JOURNEY

14.

1
Login/
Signup

15.

Login & Signup
The 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 & Signup
All fields are validated
on both front-end and
back-end sides.
And successful login, the
user is redirected to the
Dashboard page.

17.

2
Dashboard
1
Login/
Signup

18.

Default view of Dashboard

19.

Full user profile

20.

21.

22.

23.

24.

25.

26.

Own post
Friend’s post
Delete the post
Google
Static Maps
API
Add kudos
Add comments
Unfollow the frien

27.

28.

29.

30.

A maximum of three
challenges the user
has subscribed to,
with an indication
of the progress

31.

A maximum of three
challenges 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 three
challenges 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.

2
Dashboard
1
Login/
Signup
3
Add
Activity

35.

Add activity
Consists 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 according
Removes the
to the current geolocation
markers and the
route

38.

Displays the map according
Removes the
to the current geolocation
markers and the
route
If the route can’t be built

39.

The map and the route
change dynamically when
you select a sport
activity.

40.

The map and the route
change dynamically when
you select a sport
activity.

41.

The map and the route
change 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.

2
Dashboard
1
Login/
Signup
3
4
Add
Activity
Add
friends

43.

Find Friends

44.

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.

2
Dashboard
5
Challenges
1
Login/
Signup
3
4
Add
Activity
Add
friends

49.

Challenges

50.

Filter challenges *
* no points were requested for this feature

51.

Filter challenges
Accept / reject the
challenge

52.

Filter challenges
Accept / reject the
challenge
Avatars of 3 friends,
participating in the
challenge
Total number of
participating friends

53.

Filter challenges
Accept / reject the
challenge
Avatars of 3 friends,
participating in the
challenge
Days
until
the end
of the
challenge
Total number of
participating friends

54.

2
6
Dashboard
5
Settings
Challenges
1
Login/
Signup
3
4
Add
Activity
Add
friends

55.

Settings

56.

Settings
Avatar changing
All fields can be
filled
All fields are
validated

57.

Settings
Avatar changing
All fields can be
filled
All fields are
validated
Account deleting

58.

Translation
The 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 complicated
by 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.

Design
Processed screenshots for layout
creation
Final design

61.

Design
Processed screenshots for layout
creation
Final design

62.

The design of the original Strava
is 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 people

64.

There are two types of people
Those who love the light
and those who burn their eyes with it.

65.

Dark theme

66.

Dark theme
My respect!

67.

Backend

68.

Data structure
Comments
User
Activity
Kudos
Follows
Route
Likes

69.

Difficulties
Structure the data
in advance
What information and
in what form we will
store on the server

70.

Difficulties
Structure 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.

Difficulties
Structure 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.

Work
organization

73.

RACI matrix
R - 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 organization
of our team
3
2
Discord
discussions
Calls
4
Mentor’s
Advices
5
Codestyle
1
Kanban board
6
PR & Codereview

75.

Kanban board in Trello

76.

High
priority
Medium
priority
Low
priority
Topics
to discuss

77.

High
priority
Medium
priority
Low
priority
Topics
to discuss

78.

High
priority
Medium
priority
Low
priority
Topics
to discuss

79.

Discord chats
Discussions
Everyday tasks status
Bugs to fix
PRs waiting for approvals

80.

Calls
In 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 advices
Advices and help
Code review

82.

Mentor advices
Advices and help
Code review

83.

Mentor advices
Advices and help
Code review

84.

Mentor advices
Advices and help
Codereview

85.

Code style
Each 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 review

87.

PR & Code review

88.

PR & Code review

89.

PR & Code review

90.

PR & Codereview

91.

Github statistics

92.

Difficulties

93.

A lot of conflicts in
branches

94.

Numerous conflicts in
branches
we tried to divide
the areas of work as
much as possible and
to pull the changes
frequently

95.

Didn't discuss the folder
structure in advance and
it was chaotic

96.

Didn't discuss the folder
structure 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 the
code of components could
break already made
features

98.

Adding and changing the
code of components could
break already made
features
We tried to check
such bugs immediately
when changes are made

99.

100.

101.

102.

Thank you for your attention!