The latest articles on DEV Community by Oscar Flores (@oscaroflores). https://dev.to/oscaroflores https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1515824%2Fcde575b1-a2fd-4a11-a82a-96dd3c93fb77.jpg https://dev.to/oscaroflores en Oscar Flores Mon, 15 Jul 2024 06:56:47 +0000 https://dev.to/oscaroflores/kohf-an-interactive-ecommerce-and-learning-platform-336n https://dev.to/oscaroflores/kohf-an-interactive-ecommerce-and-learning-platform-336n <p><em>This is a submission for the <a href="https://dev.to/challenges/wix">Wix Studio Challenge </a>.</em></p> <h2> What I Built </h2> <p>Been looking for a new hobby? Do you love the subtle yet elegant art of ceramics? Look no further. Kohf offers an intuitive platform for those who have an interest in starting out learning painting ceramics. The platform has two main components: its ecommerce component and its academy.</p> <p>Its ecommerce component sells everything a beginner to an expert needs to paint ceramics from home. This includes brushes, a wide variety of pottery styles, and paints. </p> <p>The platforms also sports an "academy." Where users can enroll as a beginner, intermediate, or experience artist. Their level of experience determines what classes the academy lets users access. And it also tracks the user's progress throughout their learning journey. </p> <h2> Demo </h2> <p><a href="https://oscaromarflores.wixstudio.io/kohf" rel="noopener noreferrer">https://oscaromarflores.wixstudio.io/kohf</a></p> <h3> KOHF ECOMMERCE STORE COMPONENT </h3> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz82qjhyypm60oy9yfpan.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz82qjhyypm60oy9yfpan.png" alt="Image description" width="800" height="492"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8hp1dgs407wkoszsw9ck.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8hp1dgs407wkoszsw9ck.png" alt="Image description" width="800" height="494"></a></p> <h3> KOHF ACADEMY </h3> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqmqddfzf200jwx454ac3.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqmqddfzf200jwx454ac3.png" alt="Image description" width="800" height="393"></a></p> <h3> OTHER PHOTOS SHOWCASING WEBSITE UI </h3> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F511bh08pbwrcq18txhj8.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F511bh08pbwrcq18txhj8.png" alt="Image description" width="800" height="392"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs0l3foc1hszd5tjvvucp.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs0l3foc1hszd5tjvvucp.png" alt="Image description" width="800" height="387"></a></p> <h2> Development Journey </h2> <p>Wix studio offers a full stack development environment that can be used to build virtually anything on the web. With its variety of tools the website is able to boast a full ecommerce solution, complex animations and styling, backend routing, dynamic pages utilizing Velo's wix-data api, website user authentication, and a custom/home made online courses platform.</p> <h3> Features included for this submission </h3> <h4> Member authentication using web modules, wix roles, and wix members api </h4> <p>Since the online courses platform is only accessible to users that have created an account and have been able to enroll, it was necessary to create new roles for users to be able to access only the parts of the platform they are supposed to.</p> <h4> Online course 3-tier leveling and authentication system using wix badges and wix routers </h4> <p>The courses are divided into 3 tiers:</p> <ol> <li>Beginner</li> <li>Intermediate</li> <li>Experienced For each tier there are only certain courses available for the user. This was implemented by monitoring the session member's badges, roles, and permissions so that dynamic data being displayed in the academy dashboard is filtered according to the user's current skill level. </li> </ol> <p>&lt;!-- Thanks for participating! →</p> devchallenge wixstudiochallenge webdev javascript