Have you ever wanted to go to a dancing class, but were too shy to go alone? OneTwoThree is a social network, enabling you to look for a buddy or a group of buddies to join a certain class with you.
Final group project of Le Wagon Web Development Bootcamp. Batch #601
The idea behind the project was to create a mini social network app, where people can organise themself around different dancing event places and classes and find dancing partner or entire group. Another layer of the application was a gamification aspect with achievements system and levels depending on number of lessons completed and feedback from dancing partners.
Our team joyfully spent about half of the time given to produce the application on planning, designing on paper, Whimsical, Figma and sketching countless iterations of the schema. 🤨
As a result of the challenging second half, we came up with the product presented here that can be visited below.
The application is deployed to Heroku and available here:
 |
 |
 |
 |
 |
 |
Install gems
bundle install
Install JS packages
yarn install
Create .env file
touch .env
Inside .env, set these variables.
CLOUDINARY_URL=your_own_cloudinary_url_key
MAPBOX_API_KEY=your_own_mapbox_url_key
rails db:create
rails db:migrate
rails db:seed
rails s
Log in as testing@testing.com
- Rails 6 - Backend / Front-end
- Stimulus JS - Front-end JS
- Heroku - Deployment
- PostgreSQL - Database
- Bootstrap — Styling
- Figma — Prototyping
Available at: Whimsical/OneTwoThree
 |
 |
 |
Available at: Figma/OneTwoThree
 |
 |
|
 |
And some of the older versions:
 |
 |
 |
Application consist of eight models in total! -User - Entire User logic was created using DEVISE - Authentication logic - Photo attachment using Cloudinary as active_storage - After logging in User can either look for other users to dance with or look for places to dance.
- Place
- Photo attachment using Cloudinary as active_storage
- Phisical object, schools of dance, music clubs with occuring dancing events
- Event
- Photo attachment using Cloudinary as active_storage
- Is taking place in "The Place" (duh!)
- Created by User, owner of the Place
- May have many attendants, groups and invites
- Invite
- User can either add yourself to the even, invite someone else straight to the event or create a grou or add someone an existing group of people going together to the given event.
- Each user story have differen routes and path and its carrying different sets of params throughout all views. Not challenging at all. Not even a bit...
- Group
- Backbone of the aplication
- Internal dashboard for group of people going together to that one given event in that one place.
- Fully dynamic with responsive menu allowing to add participants and with build in chat created using WebSocket and ActionCable
- Review
- After participating with some other user in an event or after beeing with him in a group you can leave a "review" at his profile pic that only you will be able to modify, a part of gamification aspect of the application, depending on rating of those reviews each user will progress with level and get a new achievement.
- Chatroom
- Part of the live chat logic in Group model
- Message
- Look above!
- Entire User logic with authentication done with DEVISE
- Geolocation for Users and Places done with Mapbox
- Search Engine through Users or Places done with pg_search
- Photo attachment using Cloudinary as active_storage for Users, Places and Events
- AJAX for Reviews
- Webpack and Action Cable for Live Chat in Groups
Animated background of the application is done purely with use of CSS and this is something I'm the most proud of. It consists of a div with gradient moving basically left to right and top to bottom. Inside the div, there is an empty list that serves as those animated squares in the background.
<div class="gradient"></div>
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
While gradient is just translating its position in two axis, list elements are moving vertically, rotating and decreasing opacity at the same time in a loop.
.gradient {
z-index: -10;
position: fixed;
width: 100%;
height: 100%;
background: linear-gradient(-45deg, #8741e6, #b2519f, #da5e58, #d8b46e);
background-size: 400% 400%;
animation: my-gradient 10s ease infinite;
overflow: hidden;
}
@keyframes my-gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.circles{
padding: 0;
margin: 0;
z-index: -9;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li{
position: absolute;
display: block;
list-style: none;
width: 40vw;
height: 40vh;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1){
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
What's worth mentioning is the almost full responsiveness of the entire app. It could use some final touches, but overall I'd like to present examples below:
 |
 |
 |
 |
 |
Le Wagon Coding Bootcamp was simply the most amazing learning experience in my life with teaching quality I've never seen before and that application is the final showdown of all the skills acquired during the bootcamp. There is still so much to do, but it's mostly refactoring and working on the front end. The only important bit that is really missing is Testing and any TDD, CI/CD principles, but realistically, considering the time given - that was a necessary sacrifice. Considering that this application is shared effort, despite all those missing elements I think it is a viable product and it suffices to leave it in that state.
Big thank you to the most amazing team ever!
Michale Barrett For all your work on the hardest bits with JS and best Seed file I've ever seen! 👍
Ervis Lapi For the initial idea and giving your heart and soul into this app. 🤍
Once again - sorry guys for hijacking Front End of the App. I promise it's the last time! 😄
This project is licensed under the MIT License.