project-c185cb3f
FaizalI want to build a website in which there is a lucky spin which includes gemstones ( like Emerald, citrine, amethyst, rose quartz, smoky topaz, aquamarine, labradorite, rutile) when someone spin the roller the chances of getting emerald should be zero but don't show the chances to someone who spin and also the chances of getting aquamarine is 5%. And the one who comes on my website can spin only one time. don't add the diamond as a gemstone in spinner i don't want to add diamond. don't add the diamond as a gemstone in spinner i don't want to add diamond, Also i want to add Coupon option when someone comes to my websites and want to spin when he/she tap on spinner then it asks for Unlock Lucky Spinner by Coupon. Only I knows the Coupon and the coupon should be different from each when every time its use or it uses only one time, And Only I Knows the Unlimited Coupons. Only I can share Coupons to someone who wants to spin, also i want that no one can take screenshot or make screen record on my full website, and also i want an option when the spinner are spined and it comes on the result page of which gemstones you win add download photo option which can download the photo of the spinner result of what someone win and also i want on the first page there are steps written when someone comes on the website, and the steps are explaining about what to do add Step-1) Click on the Lucky Spin To Spin The Roller And Check Your Luck. Step-2) After the Result of your winnings download the photo. Step-3) Send the Downloaded Photo By Messaging us on Etsy of your result. Also add the button after the result of lucky spin Of Etsy which Can Directly move someone to My Etsy Website Link ( https://colourscraftstones.etsy.com ) And Add Step-4) You Will Get The Stone you Want dont add login option on my website its free
Comments (0)
Sign in to leave a comment
Project Tasks
38Design Database Schema
Design and implement the database schema for storing user data, coupons, and spin results.
Implement Screenshot Prevention
Develop and integrate security measures to prevent screenshots and screen recordings on the website.
Setup RBAC Middleware
Implement role-based access control to ensure only Admin can access the Admin Dashboard.
Setup CI/CD Pipeline
Configure CI/CD pipeline for automated testing and deployment using Docker and Kubernetes.
Implement CouponSection for Landing
As a frontend developer, implement the CouponSection for the Landing page. This section includes a text input for entering a coupon code, which updates the state using the useState hook. It also features a link to the Spin page and an external link to the Etsy shop. Ensure the input field is accessible with an aria-label and that the section is styled according to the provided CSS. Page access: User only.
Implement Footer for Landing
As a frontend developer, implement the Footer for the Landing page. This section includes navigation links to various pages, including restricted pages like AdminDashboard, which should only be shown to Admins. Ensure the footer is styled according to the provided CSS and includes the brand logo and tagline. Page access: User only.
Implement GemstonesSection for Landing
As a frontend developer, implement the GemstonesSection for the Landing page. This section displays a grid of gemstone cards using the motion library for animations. Each card includes a gemstone name, color, rarity, and description. Ensure the animations are smooth and the section is styled according to the provided CSS. Page access: User only.
Implement HeroSection for Landing
As a frontend developer, implement the HeroSection for the Landing page. This section features a complex animated wheel using the motion library and useMemo for performance optimization. It includes animated segments and sparkles, with reduced motion support. Ensure the animations are performant and the section is styled according to the provided CSS. Page access: User only.
Implement HowItWorksSection for Landing
As a frontend developer, implement the HowItWorksSection for the Landing page. This section outlines the steps to use the lucky spin feature, with each step animated using the motion library. Ensure the animations are smooth and the section is styled according to the provided CSS. Page access: User only.
Implement Navbar for Landing
As a frontend developer, implement the Navbar for the Landing page. This section includes a responsive navigation menu with a toggle button controlled by the useState hook. Ensure the menu links are styled according to the provided CSS and that links to restricted pages like AdminDashboard are conditionally shown based on user persona. Page access: User only.
Implement Navbar for Admin Dashboard
As a frontend developer, implement the Navbar section for the Admin Dashboard. This component includes a logo link, a toggle button for mobile navigation, and links to Home, Spin, Result, and Admin pages. The menu state is managed using a useState hook to toggle visibility. Ensure that the Admin link is conditionally shown only to Admin personas. Page access: Admin only.
Implement CouponInput for Spin
As a frontend developer, implement the CouponInput section for the Spin page. This section allows users to enter a coupon code to unlock the spin. It includes a gemstone icon rendered with D3 and animations using motion/react. Ensure the input is validated and interacts with the backend to verify coupon validity. This section is accessible by Users only. Page access: User only.
Implement SpinResult for Spin
As a frontend developer, implement the SpinResult section for the Spin page. This section displays the result of the spin, showing the gemstone won. It uses local storage to persist the result and includes animations with motion/react. Ensure the result is displayed correctly based on the spin outcome. This section is accessible by Users only. Page access: User only.
Implement ResultActions for Spin
As a frontend developer, implement the ResultActions section for the Spin page. This section provides actions for the user after viewing their spin result, such as downloading the result image and redirecting to Etsy. It includes canvas rendering and event handling for user interactions. This section is accessible by Users only. Page access: User only.
Implement Coupon API
Develop API endpoints for coupon generation, validation, and usage tracking, accessible by Admin only.
Develop Spin API
Create API endpoints for handling spin requests, result determination, and result photo generation.
Implement AdminHeader for Admin Dashboard
As a frontend developer, implement the AdminHeader section for the Admin Dashboard. This component displays the current date and time, a welcome message, and statistics for total coupons, active coupons, and security alerts. It uses props to receive these values and formats the date and time using JavaScript's Date object. Page access: Admin only.
Implement AdminSidebar for Admin Dashboard
As a frontend developer, implement the AdminSidebar section for the Admin Dashboard. This component includes navigation links for 'Coupon Management', 'Security Monitoring', and 'Settings / Logs'. It uses useState to manage the active section and mobile sidebar visibility. The sidebar highlights the active section based on user interaction. Page access: Admin only.
Implement CouponGeneratorForm for Admin Dashboard
As a frontend developer, implement the CouponGeneratorForm section for the Admin Dashboard. This form allows admins to generate new coupons by specifying quantity, prefix, and expiration date. It includes validation logic to ensure correct input values and uses useState to manage form state and errors. Page access: Admin only.
Implement GeneratedCouponsList for Admin Dashboard
As a frontend developer, implement the GeneratedCouponsList section for the Admin Dashboard. This component displays a list of recently generated coupons and provides functionality to copy coupon codes to the clipboard and download the list as a CSV file. It handles empty states when no coupons are available. Page access: Admin only.
Implement CouponTable for Admin Dashboard
As a frontend developer, implement the CouponTable section for the Admin Dashboard. This component provides a searchable, sortable, and paginated table of coupons. It uses useState and useMemo hooks to manage search, filter, and sort functionalities, and allows selection of multiple coupons for batch actions. Page access: Admin only.
Implement CouponTableActions for Admin Dashboard
As a frontend developer, implement the CouponTableActions section for the Admin Dashboard. This component provides action buttons for revoking, marking as used, and emailing selected coupons. It includes a modal for entering recipient emails and uses useState to manage modal visibility and input state. Page access: Admin only.
Implement SecurityStatusPanel for Admin Dashboard
As a frontend developer, implement the SecurityStatusPanel section for the Admin Dashboard. This component displays the current security status and allows toggling of security features. It includes a button to test prevention measures, updating the UI with test results using useState. Page access: Admin only.
Implement BlockedAttemptsLog for Admin Dashboard
As a frontend developer, implement the BlockedAttemptsLog section for the Admin Dashboard. This component displays a paginated log of blocked attempts with date filtering options. It provides export functionality for CSV and PDF formats, using useMemo for efficient data filtering. Page access: Admin only.
Implement Footer for Admin Dashboard
As a frontend developer, implement the Footer section for the Admin Dashboard. This component includes branding, navigation links, and a copyright notice. Ensure that links to restricted pages are conditionally shown based on the user's persona. Page access: Admin only.
Implement SpinWheelVisuals for Spin
As a frontend developer, implement the SpinWheelVisuals section for the Spin page. This section includes a spinning wheel with gemstone segments using D3 for rendering and animations with motion/react. The wheel should visually appear fair, but the winning odds are determined by JavaScript weights. Ensure the wheel can spin, and the winning gemstone is selected based on weighted probabilities. This section is accessible by Users only. Page access: User only.
Setup Database Retention Rules
As a Data Engineer, implement database retention rules for user data and coupon information. Ensure that expired or used coupons are archived or deleted according to the data retention policy.
QA Spin Flow
Test the complete spin flow from coupon entry to result download and Etsy redirection.
Implement ResultHero for Result
As a frontend developer, implement the ResultHero section for the Result page. This section features a congratulatory message with the winning gemstone name, animated using the motion library. It includes a series of animated sparkles positioned around the text, each with a unique delay and color from the SPARKLE_COLORS array. Ensure the animations are smooth and loop infinitely. This page is accessible by Users only. Page access: User only.
Develop Coupon Validation API
As a Backend Developer, create API endpoints for validating coupon codes entered by users. Ensure that each coupon can only be used once and is unique. This API should interact with the database to check coupon validity and update its status upon use.
Implement Spin Result Algorithm
As a Backend Developer, implement the algorithm to determine the spin result based on predefined probabilities. Ensure that the probability of winning an emerald is 0% and an aquamarine is 5%. This algorithm should be integrated with the spin API.
Integrate Spin Feature
As a Tech Lead, verify the end-to-end integration between the Spin feature frontend implementation and the Spin API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.
Implement ResultGemstoneDisplay for Result
As a frontend developer, implement the ResultGemstoneDisplay section for the Result page. This section displays the winning gemstone with a dynamic background color based on the gemstone type. It uses motion animations for the gemstone card and includes a sparkle overlay animation. This page is accessible by Users only. Page access: User only.
Integrate Result Feature
As a Tech Lead, verify the end-to-end integration between the Result feature frontend implementation and the backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.
QA Result Flow
As a QA Engineer, test the complete result flow from viewing the spin result to downloading the photo and redirecting to Etsy. Ensure all functionalities work as expected and meet the requirements.
Implement ResultActions for Result
As a frontend developer, implement the ResultActions section for the Result page. This section includes a button to download an SVG image of the winning gemstone and a link to visit the Etsy shop. The download functionality uses a useCallback hook to generate and download the SVG. This page is accessible by Users only. Page access: User only.
Implement ResultInstructions for Result
As a frontend developer, implement the ResultInstructions section for the Result page. This section provides step-by-step instructions on how to use the lucky spin feature. Each step is animated using motion, with a staggered delay for each step. This page is accessible by Users only. Page access: User only.
Implement ResultCTA for Result
As a frontend developer, implement the ResultCTA section for the Result page. This section includes a call-to-action for users to spin again or return to the home page. It features animated buttons with hover and tap effects. This page is accessible by Users only. Page access: User only.
Spin the Wheel,
Win a Precious Gem
Use your exclusive coupon to unlock a magical spin and discover which gemstone awaits you — from lush emeralds to shimmering labradorite.
How It Works
Four simple steps to your gemstone
Click on the Lucky Spin
Enter your unique coupon and click on the Lucky Spin wheel to begin.
Download the Photo
Download the photo of your spin result to keep as your proof.
Send the Photo via Etsy Messaging
Send us your result photo through Etsy messaging on our shop. Visit our Etsy shop →
You Will Get The Stone You Want
We confirm your result and send you the exact stone you won.
The Gemstones
Eight precious stones waiting to be discovered on the wheel
The rarest treasure — a mythical green stone of extraordinary beauty.
Golden warmth that brings joy and abundance to its bearer.
A purple jewel known for its calming, protective energy.
A gentle pink stone radiating love, warmth, and quiet harmony.
A rich smoky brown gem prized for its grounding, earthy elegance.
Sea-blue clarity reminiscent of crystal ocean waters.
A mystical stone that flashes blue-green fire from within its shadowed depths.
Golden threads of light captured in quartz — rare and mesmerizing.
Ready to Spin?
Enter your unique coupon code to unlock the gemstone wheel and discover your prize
Don't have a coupon? Contact us to receive your unique one-time code.
After your spin, send your result photo on our Etsy shop ✦ Visit colourscraftstones.etsy.com →Spin the Wheel,
Win a Precious Gem
Use your exclusive coupon to unlock a magical spin and discover which gemstone awaits you — from lush emeralds to shimmering labradorite.
How It Works
Four simple steps to your gemstone
Click on the Lucky Spin
Enter your unique coupon and click on the Lucky Spin wheel to begin.
Download the Photo
Download the photo of your spin result to keep as your proof.
Send the Photo via Etsy Messaging
Send us your result photo through Etsy messaging on our shop. Visit our Etsy shop →
You Will Get The Stone You Want
We confirm your result and send you the exact stone you won.
The Gemstones
Eight precious stones waiting to be discovered on the wheel
The rarest treasure — a mythical green stone of extraordinary beauty.
Golden warmth that brings joy and abundance to its bearer.
A purple jewel known for its calming, protective energy.
A gentle pink stone radiating love, warmth, and quiet harmony.
A rich smoky brown gem prized for its grounding, earthy elegance.
Sea-blue clarity reminiscent of crystal ocean waters.
A mystical stone that flashes blue-green fire from within its shadowed depths.
Golden threads of light captured in quartz — rare and mesmerizing.
Ready to Spin?
Enter your unique coupon code to unlock the gemstone wheel and discover your prize
Don't have a coupon? Contact us to receive your unique one-time code.
After your spin, send your result photo on our Etsy shop ✦ Visit colourscraftstones.etsy.com →
No comments yet. Be the first!