Skip to content

Linked pages with explore button for Info #687

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Linked pages with explore button for Info #687

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 15 additions & 5 deletions backendChallenges.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,35 +18,45 @@ <h1>Backend Basics Challenges</h1>
<div class="challenge-desc">
Create a basic Express or Flask API that returns JSON data.
</div>
<div class="explorebtn">Explore more</div>
<a href="backendChallenges1.html">
<div class="explorebtn">Explore more</div></a
>
</div>
<div class="challenge">
<div class="challenge-title">Form Submission Backend</div>
<div class="challenge-desc">
Accept and store form data sent from a frontend using POST.
</div>
<div class="explorebtn">Explore more</div>
<a href="backendChallenges2.html">
<div class="explorebtn">Explore more</div></a
>
</div>
<div class="challenge">
<div class="challenge-title">User Auth Basics</div>
<div class="challenge-desc">
Implement simple login/signup logic using sessions or JWT.
</div>
<div class="explorebtn">Explore more</div>
<a href="backendChallenges3.html">
<div class="explorebtn">Explore more</div></a
>
</div>
<div class="challenge">
<div class="challenge-title">CRUD with SQLite</div>
<div class="challenge-desc">
Build a Create/Read/Update/Delete API for a todo app.
</div>
<div class="explorebtn">Explore more</div>
<a href="backendChallenges4.html">
<div class="explorebtn">Explore more</div></a
>
</div>
<div class="challenge">
<div class="challenge-title">API Documentation</div>
<div class="challenge-desc">
Use Swagger or Postman to document your API endpoints.
</div>
<div class="explorebtn">Explore more</div>
<a href="backendChallenges5.html">
<div class="explorebtn">Explore more</div></a
>
</div>
</div>
</body>
Expand Down
83 changes: 83 additions & 0 deletions backendChallenges1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="exploremore.css" />
<title>Frontend Challenges</title>
</head>
<body>
<h1>Challenge: Create a Simple API Server</h1>

<div class="card">
<h2>Objective</h2>
<p>
Build a basic API server using Express (Node.js) or Flask (Python). The
API should return JSON data and provide at least one endpoint.
</p>

<h2>Key Features to Implement</h2>
<ol>
<li>
<strong>Basic Server Setup:</strong>
<ul>
<li>
Use Express (JavaScript) or Flask (Python) to create a server.
</li>
<li>
Run the server locally on a specific port (e.g., 3000 or 5000).
</li>
</ul>
</li>
<li>
<strong>Endpoints:</strong>
<ul>
<li>
Create a root endpoint (<code>/</code>) that returns a welcome
message in JSON.
</li>
<li>
Add at least one more endpoint (e.g., <code>/users</code> or
<code>/products</code>) that returns sample data in JSON format.
</li>
</ul>
</li>
<li>
<strong>JSON Response:</strong>
<ul>
<li>Return properly formatted JSON objects/arrays.</li>
<li>
Include multiple fields like <code>id</code>, <code>name</code>,
<code>price</code>, etc. for practice.
</li>
</ul>
</li>
<li>
<strong>Optional Enhancements:</strong>
<ul>
<li>
Add query parameters (e.g., <code>/users?id=1</code> to fetch a
specific user).
</li>
<li>Add error handling (e.g., return 404 if data not found).</li>
<li>Enable CORS so the API can be consumed by frontend apps.</li>
</ul>
</li>
</ol>

<h2>Tools & Techniques to Practice:</h2>
<ul>
<li>Node.js + Express or Python + Flask.</li>
<li>JSON formatting and response handling.</li>
<li>REST API basics (endpoints, status codes, parameters).</li>
</ul>

<h2>Challenge Goals</h2>
<ul>
<li>Learn how to set up a simple backend server.</li>
<li>Understand how to return JSON responses.</li>
<li>Build a foundation for creating more advanced REST APIs.</li>
</ul>
</div>
</body>
</html>
90 changes: 90 additions & 0 deletions backendChallenges2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="exploremore.css" />
<title>Backend Challenges</title>
</head>
<body>
<h1>Challenge: Build a Form Submission Backend</h1>

<div class="card">
<h2>Objective</h2>
<p>
Create a backend server that accepts form data sent from a frontend
using the POST method. The server should validate, process, and store
the data.
</p>

<h2>Key Features to Implement</h2>
<ol>
<li>
<strong>Server Setup:</strong>
<ul>
<li>
Use Express (Node.js) or Flask (Python) to set up the backend.
</li>
<li>
Enable body parsing to handle incoming POST request data (e.g.,
JSON or URL-encoded).
</li>
</ul>
</li>
<li>
<strong>Form Endpoint:</strong>
<ul>
<li>
Create a <code>/submit</code> endpoint that accepts POST requests.
</li>
<li>
Collect data such as <code>name</code>, <code>email</code>,
<code>message</code>.
</li>
<li>
Validate the input (e.g., check required fields, valid email).
</li>
</ul>
</li>
<li>
<strong>Data Handling:</strong>
<ul>
<li>
Store form submissions in an in-memory array (for practice) or a
JSON file.
</li>
<li>
Return a success response with the submitted data in JSON format.
</li>
<li>Handle errors gracefully (missing fields, invalid data).</li>
</ul>
</li>
<li>
<strong>Optional Enhancements:</strong>
<ul>
<li>Save data into a database (SQLite, MongoDB, PostgreSQL).</li>
<li>Send an email notification on each form submission.</li>
<li>Add CORS support to allow frontend apps to connect.</li>
</ul>
</li>
</ol>

<h2>Tools & Techniques to Practice:</h2>
<ul>
<li>Backend frameworks: Express (Node.js) or Flask (Python).</li>
<li>HTTP POST request handling.</li>
<li>Data validation and JSON responses.</li>
<li>Optional: Database integration and CORS.</li>
</ul>

<h2>Challenge Goals</h2>
<ul>
<li>Understand how POST requests are handled in backend frameworks.</li>
<li>Learn how to receive and process data from frontend forms.</li>
<li>
Build a foundation for connecting frontend forms with databases.
</li>
</ul>
</div>
</body>
</html>
100 changes: 100 additions & 0 deletions backendChallenges3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="exploremore.css" />
<title>Backend Challenges</title>
</head>
<body>
<h1>Challenge: Implement User Authentication Basics</h1>

<div class="card">
<h2>Objective</h2>
<p>
Build a simple authentication system that allows users to sign up, log
in, and remain authenticated using sessions or JSON Web Tokens (JWT).
</p>

<h2>Key Features to Implement</h2>
<ol>
<li>
<strong>Signup:</strong>
<ul>
<li>
Create a <code>/signup</code> endpoint to register new users.
</li>
<li>
Accept fields like <code>username</code>, <code>email</code>, and
<code>password</code>.
</li>
<li>Hash passwords before storing (use libraries like bcrypt).</li>
</ul>
</li>
<li>
<strong>Login:</strong>
<ul>
<li>
Create a <code>/login</code> endpoint that checks credentials.
</li>
<li>
On success, issue a session (cookie-based) or JWT (token-based).
</li>
<li>
On failure, return an error response with proper status codes.
</li>
</ul>
</li>
<li>
<strong>Protected Routes:</strong>
<ul>
<li>
Create a <code>/profile</code> or <code>/dashboard</code> endpoint
that requires authentication.
</li>
<li>
Verify session cookies or validate JWT before allowing access.
</li>
</ul>
</li>
<li>
<strong>Logout:</strong>
<ul>
<li>Clear session or invalidate JWT on logout request.</li>
</ul>
</li>
<li>
<strong>Optional Enhancements:</strong>
<ul>
<li>Add token expiration and refresh logic.</li>
<li>Include role-based access control (admin vs. user).</li>
<li>
Connect with a database (MongoDB, PostgreSQL, etc.) for persistent
storage.
</li>
</ul>
</li>
</ol>

<h2>Tools & Techniques to Practice:</h2>
<ul>
<li>
Express (Node.js) with <code>express-session</code> or JWT libraries
(<code>jsonwebtoken</code>).
</li>
<li>Flask (Python) with Flask-Login, Flask-JWT, or Flask-Sessions.</li>
<li>Password hashing with bcrypt or similar libraries.</li>
<li>Authentication middleware for route protection.</li>
</ul>

<h2>Challenge Goals</h2>
<ul>
<li>Understand the basics of user authentication.</li>
<li>Learn how to handle login, signup, and session management.</li>
<li>
Build a foundation for secure and scalable authentication systems.
</li>
</ul>
</div>
</body>
</html>
Loading