Level Up Your Skills
Your platform to learn, practice, and elevate your career journey with interactive tutorials, real-world projects, and AI-powered tools
Learn visually with step-by-step coding guides featuring live previews.
Explore practical UI components with full Storybook access and source code.
Get AI-powered interview plan based on your resume and target role.
Learn visually with step-by-step coding guides featuring live previews.
Interactive Tutorials
Learn visually with step-by-step coding guides featuring live previews.
UI Showcase
Explore practical UI components with full Storybook access and source code.
Interview Lab
Get AI-powered interview plan based on your resume and target role.
Prepare For Your Next Interview with AI-Powered Plan
Get personalized interview preparation plans based on your resume and target job. Practice with AI feedback and track your progress.
See Interview Lab in Action
Watch how our AI analyzes your resume and creates a personalized interview plan
AI-Powered Analysis
Upload your resume and job description to get instant AI insights and personalized interview questions
Customized Learning Path
Follow a structured preparation plan designed specifically for your target role and experience level
Track Your Progress
Monitor your preparation journey with detailed progress tracking and performance analytics
Interactive Tutorials
Build a User Profile Page with React, Tailwind and HeroUI
This tutorial shows you how to build a modern user profile page with React and HeroUI. You'll create reusable components to show user info, add a photo carousel, and display posts and photos—while learning key React and UI design skills.
Setup and initialize a new React project
Building the FeaturePhotos component
Designing the Profile Information Section
Creating the Profile Stats Section
Implementing the Profile Post Timeline
Implementing the Profile Photo Timeline
Implementing the Profile Timeline Tabs
Putting it All Together
Build a Flight Booking UI with React, Tailwind and HeroUI
This tutorial walks you through building a clean, user-friendly flight booking page using React and HeroUI. You'll create reusable components, add filters and sorting, and learn the basics of React and UI design along the way.
Setup and initialize a new React project
Building Flight Header Component
Building Flight Card Component
Building Flight List Component
Building Flight Filter Form Component
Building Flight Filter Drawer Component
Building Flight Sort Menu Component
Building Flight Preferences Component
Putting It All together
Understading Typescript Generics
Generics are a fundamental feature in statically-typed languages like TypeScript. They allow you to define components, functions, or data structures that work with a variety of types while maintaining type safety. This improves flexibility, reusability, and helps remove repetitive code.
What are generics in TypeScript?
Making Your Code Flexible with Generics
Generic Parameter Defaults
Generic Constraints
Conditional types with generics
Closing thoughts
class MyStorage<T> {private items: T[] = [];addItem(item: T): void {this.items.push(item);}getAllItems(): T[] {return this.items;}}// Usageconst stringStorage = new MyStorage<string>();stringStorage.addItem("Hello");stringStorage.addItem("World");const numberStorage = new MyStorage<number>();numberStorage.addItem(42);numberStorage.addItem(100);
Practical Showcases
Build a powerful Data Table with TansTack Table
This showcase builds on the ShadcnUI Table, adding practical features like sorting, filtering, and pagination. Use it as a reference to create flexible, production-ready data tables for your app.
Pin | Employee ID | Name | Email | Role | Country | Annual Salary | Date of Joining | Hire Type | Contract Type | Contract End Date | Probation End Date | Manager Name | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
EMP001 | John Smith | john.smith@company.com | Senior Software Engineer | United States | $120,000.00 | 3/15/2020 | Direct | Permanent | 12/9/2025 | 6/15/2020 | Sarah Johnson | ||
EMP002 | Sarah Johnson | sarah.johnson@company.com | Engineering Manager | United States | $145,000.00 | 1/10/2019 | Direct | Permanent | - | 4/10/2019 | James Wilson | ||
EMP003 | Miguel Rodriguez | miguel.rodriguez@company.com | Frontend Developer | Spain | $65,000.00 | 5/22/2021 | Direct | Permanent | - | 8/22/2021 | Sarah Johnson | ||
EMP004 | Priya Patel | priya.patel@company.com | Product Manager | India | $95,000.00 | 11/3/2020 | Direct | Permanent | - | 2/3/2021 | James Wilson | ||
EMP005 | James Wilson | james.wilson@company.com | CTO | United Kingdom | $185,000.00 | 6/1/2018 | Direct | Permanent | - | 9/1/2018 | |||
EMP006 | Fatima Al-Farsi | fatima.alfarsi@company.com | Backend Developer | United Arab Emirates | $78,000.00 | 1/15/2022 | Direct | Permanent | - | 4/15/2022 | Sarah Johnson | ||
EMP007 | Chen Wei | chen.wei@company.com | Data Scientist | China | $88,000.00 | 9/20/2021 | Direct | Permanent | - | 12/20/2021 | Vikram Patel | ||
EMP008 | Lisa Thompson | lisa.thompson@company.com | UX Designer | Canada | $82,000.00 | 8/3/2020 | Agency | Permanent | - | 11/3/2020 | Emma Watson | ||
EMP009 | Tomas Novak | tomas.novak@company.com | DevOps Engineer | Czech Republic | $72,000.00 | 11/15/2021 | Direct | Permanent | - | 2/15/2022 | Sarah Johnson | ||
EMP010 | Emily Baker | emily.baker@company.com | HR Manager | United States | $92,000.00 | 7/12/2019 | Direct | Permanent | - | 10/12/2019 | Robert Chen | ||
EMP011 | Alejandro Gomez | alejandro.gomez@company.com | Software Engineer | Mexico | $68,000.00 | 3/1/2022 | Direct | Permanent | - | 6/1/2022 | John Smith | ||
EMP012 | Sophia Müller | sophia.muller@company.com | Marketing Specialist | Germany | $71,000.00 | 2/15/2021 | Agency | Permanent | - | 5/15/2021 | Jasmine Wong | ||
EMP013 | Hiroshi Tanaka | hiroshi.tanaka@company.com | QA Engineer | Japan | $75,000.00 | 10/5/2020 | Direct | Permanent | - | 1/5/2021 | Sarah Johnson | ||
EMP014 | Anna Kowalski | anna.kowalski@company.com | Frontend Developer | Poland | $62,000.00 | 5/10/2022 | Direct | Contract | 5/10/2023 | 8/10/2022 | John Smith | ||
EMP015 | Robert Chen | robert.chen@company.com | CFO | United States | $175,000.00 | 3/15/2018 | Direct | Permanent | - | 6/15/2018 | James Wilson | ||
EMP016 | Olivia Bennett | olivia.bennett@company.com | Content Writer | Australia | $65,000.00 | 7/20/2021 | Direct | Permanent | - | 10/20/2021 | Jasmine Wong | ||
EMP017 | Lukas Eriksson | lukas.eriksson@company.com | Backend Developer | Sweden | $79,000.00 | 4/12/2020 | Direct | Permanent | - | 7/12/2020 | Thomas Wagner | ||
EMP018 | Aisha Mbeki | aisha.mbeki@company.com | Data Analyst | South Africa | $70,000.00 | 8/5/2021 | Agency | Contract | 8/5/2023 | 11/5/2021 | Vikram Patel | ||
EMP019 | Carlos Santos | carlos.santos@company.com | Project Manager | Brazil | $85,000.00 | 10/15/2019 | Direct | Permanent | - | 1/15/2020 | Priya Patel | ||
EMP020 | Emma Watson | emma.watson@company.com | Senior UX Designer | United Kingdom | $95,000.00 | 5/23/2019 | Direct | Permanent | - | 8/23/2019 | Priya Patel |
Feature Settings
Header Pinning
Pin header to the top to keep it visible while scrolling.
Row Selection
Select rows by clicking on the row checkboxes.
0 of 50 selected
Row Pinning
Pin rows to the top or bottom to keep them always visible.
Pagination
Pagination allows you to divide large datasets into smaller chunks.
Filtering
Filter globally or by specific criteria.
Column Sorting
Sort columns by clicking on the column headers. Click again to reverse the sort order.
Column Pinning
Pin columns to the left or right side of the table to keep them visible while scrolling horizontally.
Column Resizing
Resize columns by dragging the edges of the column headers.
Column Reordering
Reorder columns by dragging the column headers.
Column Visibility
Toggle the visibility of columns by checking or unchecking the checkboxes.
Follow Upskills.dev
Stay updated with our latest tutorials and coding tips.