DEV Community: Shefali Kashyap

Dynamic API Office Edition

Shefali Kashyap — Sun, 27 Jul 2025 08:36:54 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

I designed and developed a responsive intranet homepage tailored for internal office use.
This project features a clean, card-based layout with smooth transitions and dynamic data rendering through HTML,CSS and JavaScript.

Demo

Live Site : Preview
View Code : View

Journey

Key Features

Dynamic Api Integration: Instead of hardcoding API keys, I created a flexible function that extracts all keys dynamically and accesses user info based on their index, improving scalability and maintainability
Search Functionality : This includes a live search bar that filters and displays user cards matching the input, enhancing usability.

User Info Cards : Each user card is clickable, displaying detailed information in a smooth transition.

Monthly Birthday Edition : Accessible via a hamburger menu, this section shows which employees have birthdays in the current month and the age they are turning.

Responsive Design : The interface adapts to various screen sizes, ensuring a consistent user experience across devices.
Dark Mode Toggle : A toggle function allows users to switch between themes for better accessibility.

Performance-Oriented UI : Used CSS transitions and minimal DOM manipulations to ensure fast rendering and user-friendly animations.

This project focuses on simplicity with powerful functionality, aiming to serve as a clean, dynamic, and engaging homepage for internal office teams.

Winter Solstice Challenge

Shefali Kashyap — Sat, 28 Dec 2024 15:04:43 +0000

This is a submission for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice

What I Built

This frontend project is a simple and visually engaging desktop based E-magazine website drawing ideas from books. It showcases a clean and modern design using HTML, CSS, and JavaScript.

Demo

LIVE SITE :- PREVIEW
VIEW CODE :- CODE

Journey

The project was built without altering the provided HTML template, except for adding link and script tags to integrate external CSS and JavaScript. The idea behind this project was to create an E-magazine style website.
The main objective was to create an E-magazine style website with interactive and visually appealing elements.

Key Features and Functionality:

JavaScript Functionality:

Dynamically created div, section, and img elements using JavaScript.
Added and manipulated content within the DOM using JavaScript for seamless integration.
Applied JavaScript for styling adjustments, such as implementing a sticky navbar and other interactive elements.

CSS Implementation:

CSS Grid system to achieve a structured and organized layout.
CSS column feature for styling text and layout sections.
Designed a navbar with sticky positioning for improved navigation.
Used Flexbox for flexible layout elements.

Images and Multimedia:

Some images were dynamically included through JavaScript, showcasing how JavaScript can handle multimedia integration efficiently.

Limitations and Future Goals:

Currently, the website is optimized for desktop and lacks full responsiveness.
Future plans include improving the website’s responsiveness to ensure a seamless experience across all devices.

Any feedback will be appreciated.

Introducing Sharon Rose Gem: A Platform for Gem Enthusiasts Built on WIX

Shefali Kashyap — Sat, 26 Oct 2024 12:15:03 +0000

This is a submission for the Wix Studio Challenge: Community Edition.

My Community Platform

Sharon Rose Gem is crafted on WIX for gem enthusiasts to shop unique collections, explore upcoming events, and stay updated on exclusive gatherings. Plus, you can share and read insightful posts with our community!
This vibrant community platform features a variety of sections, including a Members Area, Events, Groups, an online shop, a shopping cart, a Blog, and more, all designed to enrich the experience of our gem enthusiasts.

Demo

Preview:SharonRoseGem

Development Journey

Velo APIs

1. Events API

WixEvents: For managing events.
Ticket Definitions: For managing ticket types.
Tickets: For retrieving and checking in purchased tickets.
Orders: For managing ticket reservations and orders.

2. Product API

Variants: Combinations of different product options and choices.

3. Real-time API - Allows users to send real-time messages over channels that site visitors are subscribed to.

4.Email Marketing API - Enables users to manage email marketing campaigns, create new campaigns with customized email templates, and access account information.

Wix Apps

1. WIX Business Solutions

WIX Events & Tickets enables businesses to manage events directly through their website, allowing users to create, promote, and sell tickets. Attendees can purchase tickets easily and receive confirmation via email, enhancing the overall experience.
WIX Stores manage inventory, and process payments securely.
WIX Blog Users can also enable comments for interaction, making it easy to connect with their audience and share updates, insights, or stories.

2. WIX Installed Apps

Instagram Feed - this display latest Instagram posts on the website, allowing visitors to engage with the brand's social media presence directly.
WIX Members Area allow users to manage their profiles, access members-only pages, and receive tailored content based on their interests.
WIX Groups allow to join different groups based on interests or topics, encouraging collaboration and communication among members.
WIX Checkout Requirements include shipping address, payment method, and account creation options available.
Zoom Meet

Special Features:-

1.Automation Created by owner

Users can request notifications for out-of-stock products and will receive an email once the product is back in stock.
New sign-ups receive two emails: a welcome email and an invitation to an upcoming event promotion.

2.Created a ticketed event where members can purchase tickets and receive a thank-you email with a downloadable ticket.
This event has been made available at no cost for demonstration purpose.

3.Members can follow other users, start posts, or create groups.
4.The site owner can publish blogs.
5.Members receive notifications when a new blog is published, when a group is created, or when someone follows them.

This site was an idea that lived in my mind for so long, but I’d never taken the leap to bring it to life—until the WIX Dev Challenge came along. Taking on my very first Dev challenge, I finally turned my vision into reality, and I loved every moment of working on it!

Thank you for your time! I’d be grateful for any suggestions or feedback you might have.