This is a submission for the KendoReact Free Components Challenge.
What I Built
I built a Wishlist App that allows users to:
✅ Create and manage wishlists.
✅ Add, edit, and remove wishlist items.
✅ Mark items as favorites ❤️.
✅ Share their wishlist via a unique link.
✅ Reserve items from shared wishlists.
✅ Get AI-powered gift recommendations 🎯.
Demo
Start page
Wishlist
Get AI Recommendations
Wishlist with AI Response
Share link
Shared wishlist for guests
The code app is under this link:
📌 KendoReact Free Components Challenge Submission
This is a submission for the KendoReact Free Components Challenge.
What I Built 🎁
I built a feature-rich Wishlist App that allows users to:
- ✅ Create and manage wishlists.
- ✅ Add, edit, and remove wishlist items.
- ✅ Mark items as favorites ❤️.
- ✅ Share their wishlist via a unique link.
- ✅ Reserve items from shared wishlists.
- ✅ Get AI-powered gift recommendations 🎯.
This project is designed to help users organize gift ideas for birthdays, holidays, and special occasions while enhancing collaboration with friends and family.
Running the Project Locally
- 1️⃣ Clone the Repository
git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git
cd YOUR_REPO
- 2️⃣ Setup the Environment Variables
- Frontend
Rename .env.example to .env and fill in your Firebase credentials:
REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_APP_DOMAIN=your_app_domain
REACT_APP_FIREBASE_PROJECT_NAME=your_project_name
REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
- Backend:
Rename .env.example to .env and add your Cloudflare credentials:
CLOUDFLARE_ACCOUNT=your_account_id
CLOUDFLARE_TOKEN=your_api_token
- Install Dependencies
- Frontend:
cd frontend
npm install
npm start
- Backend:
cd backend
…
📌 KendoReact Free Components Challenge Submission
This is a submission for the KendoReact Free Components Challenge.
What I Built 🎁
I built a feature-rich Wishlist App that allows users to:
- ✅ Create and manage wishlists.
- ✅ Add, edit, and remove wishlist items.
- ✅ Mark items as favorites ❤️.
- ✅ Share their wishlist via a unique link.
- ✅ Reserve items from shared wishlists.
- ✅ Get AI-powered gift recommendations 🎯.
This project is designed to help users organize gift ideas for birthdays, holidays, and special occasions while enhancing collaboration with friends and family.
Running the Project Locally
- 1️⃣ Clone the Repository
git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git
cd YOUR_REPO
- 2️⃣ Setup the Environment Variables
- Frontend
Rename .env.example to .env and fill in your Firebase credentials:
REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_APP_DOMAIN=your_app_domain
REACT_APP_FIREBASE_PROJECT_NAME=your_project_name
REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
- Backend:
Rename .env.example to .env and add your Cloudflare credentials:
CLOUDFLARE_ACCOUNT=your_account_id
CLOUDFLARE_TOKEN=your_api_token
- Install Dependencies
- Frontend:
cd frontend
npm install
npm start
- Backend:
cd backend
Running the Project Locally
- 1️⃣ Clone the Repository
git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git
cd YOUR_REPO
- 2️⃣ Setup the Environment Variables
- Frontend:
Rename .env.example to .env and fill in your Firebase credentials:
REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_APP_DOMAIN=your_app_domain
REACT_APP_FIREBASE_PROJECT_NAME=your_project_name
REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
- Backend:
Rename .env.example to .env and add your Cloudflare credentials:
CLOUDFLARE_ACCOUNT=your_account_id
CLOUDFLARE_TOKEN=your_api_token
- Install Dependencies
- Frontend:
cd frontend
npm install
npm start
- Backend:
cd backend
npm install
npm start
Your app should now be running! 🎉
KendoReact Experience
KendoReact played a major role in making this wishlist app functional. I used:
✔ KendoReact Buttons: Stylish buttons for adding, sharing, and reserving wishlist items.
✔ KendoReact Inputs: Clean form controls for entering item details.
✔ KendoReact Checkbox: Used for category selection
✔ KendoReact TextArea: Entering some additional text.
✔ KendoReact DropDownList: Easy item categorization.
✔ KendoReact Avatar: Enhancing UI with user-friendly elements.
✔ KendoReact Chip: UI Component for favorite icon
✔ KendoReact Notification: Displaying alerts and updates.
✔ KendoReact ProgressBar: Showing AI recommendation loading state.
✔ KendoReact Animation: Smooth transitions for adding/removing items.
And also some icons in navigation:
✔ KendoReact homeIcon
✔ KendoReact SvgIcon
AIm to Impress
This app integrates AI-powered recommendations 🎯 using Cloudflare API to suggest personalized gift ideas based on the wishlist contents.
🛠 How it works:
1️⃣ The user clicks "Get AI Recommendations."
2️⃣ The app sends wishlist data to the AI-powered API.
3️⃣ The AI analyzes preferences and suggests new gift ideas.
4️⃣ The recommendations appear in a KendoReact Notification panel.
🔍 This feature leverages AI to enhance user experience by providing smart, tailored gift suggestions.
Team Submissions
Worked alone during this project.
🚀 Final Thoughts
🎉 This project showcases how KendoReact Free Components can be used to build a fully functional, AI-powered wishlist.
Big thanks to KendoReact for this challenge! Looking forward to exploring more KendoReact features in future projects. 🚀