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:

Yordaniss / wishlist-ai

📌 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. 1️⃣ Clone the Repository

git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git
cd YOUR_REPO

2. 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

3. Install Dependencies

• Frontend:

cd frontend
npm install
npm start

• Backend:

cd backend

…

View on GitHub

Running the Project Locally

1. 1️⃣ Clone the Repository

git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git
cd YOUR_REPO

1. 2️⃣ Setup the Environment Variables
2. 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

1. Install Dependencies
2. 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. 🚀