{"id":1485,"date":"2021-12-04T18:49:54","date_gmt":"2021-12-05T02:49:54","guid":{"rendered":"https:\/\/xyzcreativeworks.com\/?post_type=web&p=1485"},"modified":"2022-01-26T21:41:45","modified_gmt":"2022-01-27T05:41:45","slug":"sled-style-app","status":"publish","type":"web","link":"https:\/\/xyzcreativeworks.com\/web\/sled-style-app\/","title":{"rendered":"Sled Style"},"content":{"rendered":"\n
Sled Style<\/a> is a website design, development and hosting project for a Squamish company.<\/p>\n\n\n\nThe project was within their budget and they got an amazing response. They were thoroughly satisfied.<\/p>\n\n\nClient’s requirements<\/h2>\n\n\nMy clients wanted to build a website for “The World\u2019s First Professional Mountain Snowmobile Film Competition.”<\/p>\n\n\n\nSnowmobiling professionals would film a video and these videos would be featured on SledStyle.com<\/p>\n\n\n\nViewers would watch these videos and vote. They can also leave a comment using their Facebook account.<\/p>\n\n\n\nThe event ran from Nov. 15 to Dec. 1, 2021, where the athlete with the most votes would receive a $5,000 cash prize.<\/p>\n\n\n\nThe most complicated components:<\/p>\n\n\n\nVoting system<\/li>Sign-up, user login and email verification<\/li>Integrating Vimeo videos<\/li>Competition closing mechanics<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\nDesign<\/h2>\n\n\nThe design of the page had to reflect my client’s main page with its greyscale colour scheme and fonts.<\/p>\n\n\n\nThe most important design element is the athletes’ portraits which have their backgrounds removed. <\/p>\n\n\n\nThe problem is that these are not full-body portraits, so there be a unsightly line at the bottom of the image.<\/p>\n\n\n\nIn order to ensure the athletes “blended” into the page, I added a snow dust layer.<\/p>\n\n\n\n<\/figure>\n\n\n\nAbove is a demonstration on grey, which allows you to see how the snow dust layer works.<\/p>\n\n\n\nOn white, it looks like a natural blend of a portrait into the page.<\/p>\n\n\n\n<\/figure><\/div>\n\n\nDevelopment<\/h2>\n\n\nStack: NextJS, Strapi, AWS Lightsail, Elastic Email<\/p>\n\n\n\nI made the decision to use Strapi as Sled Style’s content management system (CMS) because it allows my clients to make their own modifications to the content and also made it easy for me to create a voting system and a user authentication system.<\/p>\n\n\nUser authentication, voting mechanism<\/h3>\n\n\nLogin pop up.<\/figcaption><\/figure><\/div>\n\n\n\nIn order for users to vote, they needed to create an account, verify their email address and then vote. This helps reduce voter fraud.<\/p>\n\n\n\nOnce a user has registered, they will get an email, as below,<\/p>\n\n\n\nEvery user will receive a confirmation email.<\/figcaption><\/figure>\n\n\n\nIn order to send those emails, I used Elastic Email’s SMTP server. They were fantastic because they were well priced and easy to integrate into Strapi (with nodemailer).<\/p>\n\n\n\nOnce the user is confirmed, they can then vote.<\/p>\n\n\n\nOnce a user has confirmed their email, they can then vote for their favourite athlete.<\/figcaption><\/figure><\/div>\n\n\nCompetition closure mechanism<\/h2>\n\n\nWinner badge that can be controlled by my clients<\/figcaption><\/figure><\/div>\n\n\n\nThe competition closed at 4pm on Dec. 1, 2021. when they had an Instagram livestream where they announced the winners.<\/p>\n\n\n\nClients control what viewers saw based on whether this switch was “ON” or “OFF”<\/figcaption><\/figure><\/div>\n\n\n\nIn order to ensure they could close the competition themselves, I programmed a switch into Strapi which would change the text on the web page that changes the main text as well as display a “Winner” button on the person with most votes.<\/p>\n\n\n\n <\/div> <\/div> <\/div><\/div><\/div><\/div> <\/path><\/g><\/g><\/g><\/svg><\/div> View this post on Instagram<\/div><\/div><\/div> <\/div> <\/div> <\/div><\/div> <\/div> <\/div><\/div> <\/div> <\/div> <\/div><\/div><\/div> <\/div> <\/div><\/div><\/a>A post shared by Alpine Sled Style (@alpinesledstyle)<\/a><\/p><\/div><\/blockquote>
The project was within their budget and they got an amazing response. They were thoroughly satisfied.<\/p>\n\n\n
My clients wanted to build a website for “The World\u2019s First Professional Mountain Snowmobile Film Competition.”<\/p>\n\n\n\n
Snowmobiling professionals would film a video and these videos would be featured on SledStyle.com<\/p>\n\n\n\n
Viewers would watch these videos and vote. They can also leave a comment using their Facebook account.<\/p>\n\n\n\n
The event ran from Nov. 15 to Dec. 1, 2021, where the athlete with the most votes would receive a $5,000 cash prize.<\/p>\n\n\n\n
The most complicated components:<\/p>\n\n\n\n
The design of the page had to reflect my client’s main page with its greyscale colour scheme and fonts.<\/p>\n\n\n\n
The most important design element is the athletes’ portraits which have their backgrounds removed. <\/p>\n\n\n\n
The problem is that these are not full-body portraits, so there be a unsightly line at the bottom of the image.<\/p>\n\n\n\n
In order to ensure the athletes “blended” into the page, I added a snow dust layer.<\/p>\n\n\n\n<\/figure>\n\n\n\nAbove is a demonstration on grey, which allows you to see how the snow dust layer works.<\/p>\n\n\n\nOn white, it looks like a natural blend of a portrait into the page.<\/p>\n\n\n\n<\/figure><\/div>\n\n\nDevelopment<\/h2>\n\n\nStack: NextJS, Strapi, AWS Lightsail, Elastic Email<\/p>\n\n\n\nI made the decision to use Strapi as Sled Style’s content management system (CMS) because it allows my clients to make their own modifications to the content and also made it easy for me to create a voting system and a user authentication system.<\/p>\n\n\nUser authentication, voting mechanism<\/h3>\n\n\nLogin pop up.<\/figcaption><\/figure><\/div>\n\n\n\nIn order for users to vote, they needed to create an account, verify their email address and then vote. This helps reduce voter fraud.<\/p>\n\n\n\nOnce a user has registered, they will get an email, as below,<\/p>\n\n\n\nEvery user will receive a confirmation email.<\/figcaption><\/figure>\n\n\n\nIn order to send those emails, I used Elastic Email’s SMTP server. They were fantastic because they were well priced and easy to integrate into Strapi (with nodemailer).<\/p>\n\n\n\nOnce the user is confirmed, they can then vote.<\/p>\n\n\n\nOnce a user has confirmed their email, they can then vote for their favourite athlete.<\/figcaption><\/figure><\/div>\n\n\nCompetition closure mechanism<\/h2>\n\n\nWinner badge that can be controlled by my clients<\/figcaption><\/figure><\/div>\n\n\n\nThe competition closed at 4pm on Dec. 1, 2021. when they had an Instagram livestream where they announced the winners.<\/p>\n\n\n\nClients control what viewers saw based on whether this switch was “ON” or “OFF”<\/figcaption><\/figure><\/div>\n\n\n\nIn order to ensure they could close the competition themselves, I programmed a switch into Strapi which would change the text on the web page that changes the main text as well as display a “Winner” button on the person with most votes.<\/p>\n\n\n\n <\/div> <\/div> <\/div><\/div><\/div><\/div> <\/path><\/g><\/g><\/g><\/svg><\/div> View this post on Instagram<\/div><\/div><\/div> <\/div> <\/div> <\/div><\/div> <\/div> <\/div><\/div> <\/div> <\/div> <\/div><\/div><\/div> <\/div> <\/div><\/div><\/a>A post shared by Alpine Sled Style (@alpinesledstyle)<\/a><\/p><\/div><\/blockquote>
Above is a demonstration on grey, which allows you to see how the snow dust layer works.<\/p>\n\n\n\n
On white, it looks like a natural blend of a portrait into the page.<\/p>\n\n\n\n
Stack: NextJS, Strapi, AWS Lightsail, Elastic Email<\/p>\n\n\n\n
I made the decision to use Strapi as Sled Style’s content management system (CMS) because it allows my clients to make their own modifications to the content and also made it easy for me to create a voting system and a user authentication system.<\/p>\n\n\n
In order for users to vote, they needed to create an account, verify their email address and then vote. This helps reduce voter fraud.<\/p>\n\n\n\n
Once a user has registered, they will get an email, as below,<\/p>\n\n\n\nEvery user will receive a confirmation email.<\/figcaption><\/figure>\n\n\n\nIn order to send those emails, I used Elastic Email’s SMTP server. They were fantastic because they were well priced and easy to integrate into Strapi (with nodemailer).<\/p>\n\n\n\nOnce the user is confirmed, they can then vote.<\/p>\n\n\n\nOnce a user has confirmed their email, they can then vote for their favourite athlete.<\/figcaption><\/figure><\/div>\n\n\nCompetition closure mechanism<\/h2>\n\n\nWinner badge that can be controlled by my clients<\/figcaption><\/figure><\/div>\n\n\n\nThe competition closed at 4pm on Dec. 1, 2021. when they had an Instagram livestream where they announced the winners.<\/p>\n\n\n\nClients control what viewers saw based on whether this switch was “ON” or “OFF”<\/figcaption><\/figure><\/div>\n\n\n\nIn order to ensure they could close the competition themselves, I programmed a switch into Strapi which would change the text on the web page that changes the main text as well as display a “Winner” button on the person with most votes.<\/p>\n\n\n\n <\/div> <\/div> <\/div><\/div><\/div><\/div> <\/path><\/g><\/g><\/g><\/svg><\/div> View this post on Instagram<\/div><\/div><\/div> <\/div> <\/div> <\/div><\/div> <\/div> <\/div><\/div> <\/div> <\/div> <\/div><\/div><\/div> <\/div> <\/div><\/div><\/a>A post shared by Alpine Sled Style (@alpinesledstyle)<\/a><\/p><\/div><\/blockquote>
In order to send those emails, I used Elastic Email’s SMTP server. They were fantastic because they were well priced and easy to integrate into Strapi (with nodemailer).<\/p>\n\n\n\n
Once the user is confirmed, they can then vote.<\/p>\n\n\n\n
The competition closed at 4pm on Dec. 1, 2021. when they had an Instagram livestream where they announced the winners.<\/p>\n\n\n\n
In order to ensure they could close the competition themselves, I programmed a switch into Strapi which would change the text on the web page that changes the main text as well as display a “Winner” button on the person with most votes.<\/p>\n\n\n\n
<\/div> <\/div> <\/div><\/div><\/div><\/div> <\/path><\/g><\/g><\/g><\/svg><\/div> View this post on Instagram<\/div><\/div><\/div> <\/div> <\/div> <\/div><\/div> <\/div> <\/div><\/div> <\/div> <\/div> <\/div><\/div><\/div> <\/div> <\/div><\/div><\/a>A post shared by Alpine Sled Style (@alpinesledstyle)<\/a><\/p><\/div><\/blockquote>
A post shared by Alpine Sled Style (@alpinesledstyle)<\/a><\/p><\/div><\/blockquote>