Merge pull request #35 from gurshaan17/programming-lang

programming languages page done

Author: devsdenepal

public/cheatsheets/flutter.md

@@ -0,0 +1,54 @@
+## Flutter Cheatsheet
+
+This cheatsheet provides a beginner-friendly introduction to **Flutter** for building cross-platform mobile applications with a single codebase.
+
+## Learning Objectives
+- Understand the basics of Flutter and its architecture.
+- Learn how to create and manage widgets.
+- Understand state management in Flutter.
+- Implement navigation and routing between screens.
+- Use forms and handle user input.
+- Learn about HTTP requests and fetching data from APIs.
+- Customize the look and feel of apps using themes.
+- Understand how to use Firebase for backend integration.
+
+## Cheatsheet Outline
+
+### Module 1: Introduction to Flutter
+- Overview of Flutter and Dart.
+- Setting up the Flutter development environment.
+
+### Module 2: Widgets and Layouts
+- Understanding Flutter’s widget tree.
+- Working with basic widgets like `Text`, `Container`, and `Row`.
+
+### Module 3: State Management
+- Managing state using `StatefulWidget` and `Provider`.
+- Understanding the `setState()` function.
+
+### Module 4: Navigation and Routing
+- Implementing navigation between screens.
+- Using the `Navigator` and routing techniques.
+
+### Module 5: Forms and Input Handling
+- Creating forms using `TextFormField`.
+- Validating user input.
+
+### Module 6: Networking
+- Using `http` package to make API requests.
+- Parsing JSON data in Flutter.
+
+### Module 7: Theming and Styling
+- Customizing widgets using themes.
+- Creating consistent styling across the app.
+
+### Module 8: Firebase Integration
+- Setting up Firebase in a Flutter app.
+- Using Firebase Authentication and Firestore.
+
+## Prerequisites
+- Basic knowledge of programming.
+- Familiarity with object-oriented concepts.
+
+## Conclusion
+By the end of this cheatsheet, users will be equipped with the knowledge to build simple, functional mobile applications using **Flutter**.

public/cheatsheets/javascript.md

@@ -0,0 +1,54 @@
+## JavaScript Cheatsheet
+
+This cheatsheet covers essential **JavaScript** concepts, providing a quick reference guide for beginners who want to master JavaScript fundamentals.
+
+## Learning Objectives
+- Understand JavaScript syntax and data types.
+- Work with variables and functions.
+- Learn about JavaScript's scope and closures.
+- Understand how to manipulate the DOM.
+- Explore asynchronous programming using promises and `async/await`.
+- Learn about ES6+ features like arrow functions, destructuring, and modules.
+- Implement object-oriented programming in JavaScript.
+- Utilize common array methods for data manipulation.
+
+## Cheatsheet Outline
+
+### Module 1: JavaScript Basics
+- Overview of JavaScript and its role in web development.
+- Data types and variables (`var`, `let`, `const`).
+
+### Module 2: Functions and Scope
+- Creating functions and understanding their scope.
+- Arrow functions and their usage.
+
+### Module 3: Control Flow
+- Using `if`, `else`, `switch`, and loops (`for`, `while`).
+
+### Module 4: DOM Manipulation
+- Selecting and modifying HTML elements using JavaScript.
+- Understanding `querySelector` and `getElementById`.
+
+### Module 5: Asynchronous JavaScript
+- Introduction to callbacks, promises, and `async/await`.
+- Using `fetch` for making HTTP requests.
+
+### Module 6: ES6+ Features
+- Using `let` and `const` for variable declarations.
+- Object and array destructuring.
+- Import/export modules.
+
+### Module 7: Object-Oriented JavaScript
+- Understanding objects, classes, and inheritance.
+- Creating and using classes in JavaScript.
+
+### Module 8: Array Methods
+- Overview of common array methods like `map`, `filter`, `reduce`, and `forEach`.
+- Examples of using these methods for data transformation.
+
+## Prerequisites
+- Basic understanding of HTML and CSS.
+- No prior programming experience is required.
+
+## Conclusion
+By the end of this cheatsheet, users will have a strong grasp of **JavaScript** fundamentals and be ready to build dynamic, interactive web applications.

public/cheatsheets/react.md

@@ -0,0 +1,54 @@
+## React Cheatsheet
+
+This cheatsheet is designed for beginners to get started with **React**. It covers key concepts and components that are fundamental to building user interfaces with React.
+
+## Learning Objectives
+- Understand the basics of React components and their lifecycle.
+- Create functional and class components.
+- Learn how to manage state and props.
+- Grasp the concept of hooks and their usage.
+- Implement event handling in React components.
+- Understand conditional rendering and list rendering.
+- Explore the use of forms and controlled components.
+- Use React Router for navigation between pages.
+
+## Cheatsheet Outline
+
+### Module 1: Introduction to React
+- Overview of React and its role in frontend development.
+- Setting up a React environment using `create-react-app`.
+
+### Module 2: Components and JSX
+- Understanding the role of components in React.
+- Introduction to JSX syntax and its usage.
+
+### Module 3: State and Props
+- Managing component state using `useState`.
+- Passing data between components using props.
+
+### Module 4: Hooks
+- Overview of React hooks and their purpose.
+- Using `useEffect` for handling side effects.
+
+### Module 5: Event Handling
+- Handling user events like clicks and form submissions.
+- Event binding in functional components.
+
+### Module 6: Conditional and List Rendering
+- Using conditional statements like `if` and the ternary operator.
+- Rendering lists using the `map()` function.
+
+### Module 7: Forms and Controlled Components
+- Creating forms with controlled components.
+- Handling form data using state.
+
+### Module 8: React Router
+- Setting up routing in a React app using `react-router-dom`.
+- Creating navigation between different pages.
+
+## Prerequisites
+- Basic understanding of JavaScript and ES6+ features.
+- Familiarity with HTML and CSS.
+
+## Conclusion
+By the end of this cheatsheet, users will have a foundational understanding of building interactive web applications with **React**.

src/App.jsx

@@ -22,6 +22,9 @@ import courses from './data/courseData';
 import Footer from './components/Footer';
 import Contributors from './pages/GithubFetch';
 import Events from './pages/Events';
+import Programming from './pages/ProgrammingLanguage';
+import ProgrammingLanguage from './pages/ProgrammingLanguage';
+import CheatsheetDetail from './pages/CheatsheetDetail';
 
 function App() {
   const [user, setUser] = useState(null);
@@ -72,6 +75,8 @@ function App() {
               <Route path="/search" element={<SearchResults />} />
               <Route path="/contributors" element={<Contributors />}></Route>
               <Route path="/events" element={<Events />} />
+              <Route path="/programming-languages" element={<ProgrammingLanguage />}/>
+              <Route path="/programming-languages/:cheatsheetName" element={<CheatsheetDetail/>}/>
             </Routes>
             <ToastContainer />
           </div>

src/data/cheatsheetsData.js

@@ -0,0 +1,25 @@
+const cheatsheets = {
+    'react_cheatsheet': {
+      title: 'React Cheatsheet',
+      author: 'Dev Gautam Kumar',
+      image: 'https://dummyimage.com/600x400/2196F3/fff&text=React+Cheatsheet', // Blue
+      description: 'Quick reference guide for building React apps.',
+      contentFile: 'react.md',
+    },
+    'flutter_cheatsheet': {
+      title: 'Flutter Cheatsheet',
+      author: 'Dev Gautam Kumar',
+      image: 'https://dummyimage.com/600x400/4CAF50/fff&text=Flutter+Cheatsheet', // Green
+      description: 'Reference guide for developing mobile apps with Flutter.',
+      contentFile: 'flutter.md',
+    },
+    'javascript_cheatsheet': {
+      title: 'JavaScript Cheatsheet',
+      author: 'Dev Gautam Kumar',
+      image: 'https://dummyimage.com/600x400/FF9800/fff&text=JavaScript+Cheatsheet', // Orange
+      description: 'Essential JavaScript concepts and syntax in one place.',
+      contentFile: 'javascript.md',
+    },
+  };
+  
+  export default cheatsheets;

src/pages/CheatsheetDetail.jsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import cheatsheets from '@/data/cheatsheetsData';
+import { marked } from 'marked';
+
+function CheatsheetDetail() {
+  const { cheatsheetName } = useParams();
+  const cheatsheetKey = cheatsheetName.toLowerCase();
+  const cheatsheet = cheatsheets[cheatsheetKey];
+
+  const [content, setContent] = useState('');
+
+  // Check if cheatsheet exists
+  if (!cheatsheet) {
+    return <h2 className="text-center">Cheatsheet not found</h2>;
+  }
+
+  // Fetch the Markdown file
+  useEffect(() => {
+    const fetchMarkdown = async () => {
+      try {
+        const response = await fetch(`/cheatsheets/${cheatsheet.contentFile}`); // Use the contentFile property
+        if (!response.ok) {
+          throw new Error(`Error fetching markdown file: ${response.status}`);
+        }
+        const text = await response.text();
+        setContent(marked(text)); // Convert Markdown to HTML
+        // console.log('Markdown content:', marked(text)); // Log the converted content
+      } catch (error) {
+        console.error('Error fetching the markdown file:', error);
+      }
+    };
+    fetchMarkdown();
+  }, [cheatsheet.contentFile]);
+
+  return (
+    <div className="container mt-5">
+      {/* <h1>{cheatsheet.title}</h1>
+      <p>{cheatsheet.description}</p> */}
+      <div dangerouslySetInnerHTML={{ __html: content }} /> {/* Render the converted content */}
+    </div>
+  );
+}
+
+export default CheatsheetDetail;

src/pages/Programming.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function Programming({ courses }) {
+  if (!courses || Object.keys(courses).length === 0) {
+    return <h2 className="text-center">No cheatsheets available!</h2>;
+  }
+
+  return (
+    <div>
+      <h1 className="text-center my-4">Cheatsheets</h1>
+      <div className="container my-4">
+        {/* <h2 className="text-center mb-4">Cheatsheets</h2> */}
+        <div className="row row-cols-1 row-cols-md-3 g-3">
+          {Object.entries(courses).map(([key, cheatsheet], index) => (
+            <div className="col" key={index}>
+              <div className="card h-100">
+                <Link to={`/programming-languages/${key}`} className="lnk">
+                  <img
+                    src={cheatsheet.image}
+                    className="card-img-top"
+                    alt={cheatsheet.title}
+                  />
+                  <div className="card-body">
+                    <h5 className="card-title">{cheatsheet.title}</h5>
+                    <p className="card-text">{cheatsheet.description}</p>
+                  </div>
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Programming;

src/pages/ProgrammingLanguage.jsx

@@ -0,0 +1,12 @@
+
+// import courses from '@/data/courseData';
+import Programming from './Programming';
+import cheatsheets from '@/data/cheatsheetsData';
+
+function ProgrammingLanguage(){
+    return <div>
+        <Programming courses={cheatsheets} />
+    </div>
+}
+
+export default ProgrammingLanguage;