Skip to content

React App to learn and practice Data Structures and Algorithms (DSA) through interactive lessons and exercises.

Notifications You must be signed in to change notification settings

JusmeJr93/dsa-learning-with-js

Repository files navigation

DSA Learning App

Description

The DSA Learning App is a web application designed to help beginners understand and practice Data Structures and Algorithms (DSA) through interactive lessons and exercises. Built with React, it offers a user-friendly interface and step-by-step solutions to reinforce learning.

Features

  • Interactive Lessons: Detailed explanations of various data structures and algorithms.
  • Exercises with Solutions: Practice problems with step-by-step solutions and documentation.
  • Progress Tracking: Track your learning progress with a roadmap and completion buttons.
  • Responsive Design: Optimized for all devices, ensuring a seamless learning experience.
  • Embedded CodePen: CodePen integrations for live code demonstrations.

Technologies Used

  • Vite: For the development of the app.
  • React: For building the user interface.
  • Tailwind CSS: For styling the application.
  • JavaScript: For implementing algorithms and exercises.
  • HTML/CSS: For structuring and styling the content.

React Topics and more

  • React Router: For navigation between different lessons and exercises.
  • Context API: For managing and sharing state across the application.
  • Components: Reusable React components for lessons, exercises, header, footer, etc.
  • State Management: Using React's useState and useContext hooks.
  • Conditional Rendering: Displaying components based on user interaction and state.
  • Responsive Design: Ensuring the app looks good on all devices using Tailwind CSS.
  • Hooks: Utilizing React hooks for state and lifecycle management.
  • Event Handling: Managing user interactions and events within the application.
  • CodePen Embedding: Integrating live code examples using CodePen.

Usage

1-Navigate through the Lessons:

  • Use the header menu to select different lessons.
  • Each lesson contains detailed explanations and examples.

2-Complete Exercises:

  • Practice the exercises provided.
  • Each exercise comes with a step-by-step solution and documentation.

3-Track Your Progress:

  • Use the "Mark Complete" button to mark lessons as completed.
  • View your progress on the roadmap.

Deployment

The App is deployed on Vercel. Clic to try it: DSA Learning App by Junior Jusmé

Contact

Email me at junior.jusme@gmail.com Connect with me on LinkedIn

Releases

No releases published

Packages

No packages published

Languages