CS50web Coursework

Welcome to my coursework repository for the web app development course! In this course, we delved deep into building web applications using Python, JavaScript, and SQL. We explored frameworks like Django, React, and Bootstrap, covering essential topics such as database design, scalability, security, and user experience. Through hands-on projects, I gained experience in creating APIs, building interactive UIs, and deploying applications on cloud services like GitHub and Heroku. This repository showcases my journey in learning web app development principles, languages, and tools.

Challenge 1: Search Website Specifications

• Three pages: Google Search, Google Image Search, and Google Advanced Search.
• Links for navigation between pages.
• Google Search: User can enter a query and click "Google Search" for results.
• Google Image Search: User enters a query and clicks for image results.
• Google Advanced Search: User can input search criteria and click "Advanced Search" for results.
• "I'm Feeling Lucky" button for instant results.
• Follow Google's aesthetics.

Software Screencast
For code details, check out the GitHub Folder.

Challenge 2: Wiki Encyclopedia Specifications

1. Entry Page:

   • View encyclopedia entries at /wiki/TITLE.
   • Handle non-existent entries with an error page.

2. Index Page:

   • Enable direct navigation to entries by clicking names.

3. Search:

   • Allow users to search and redirect to entries or show search results.

4. New Page:

   • Create new encyclopedia entries with unique titles.
   • Display errors for duplicate titles.
   • Save new entries to disk.

5. Edit Page:

   • Edit existing entries with pre-filled content.
   • Save changes and redirect to the entry.

6. Random Page:

   • Provide a "Random Page" link for exploration.

7. Markdown to HTML:

   • Convert Markdown content to HTML for display.

Software Screencast
For code details, check out the GitHub Folder.

Challenge 3: Auction Site Specifications

1. Models:

   • Create models for listings, bids, and comments.

2. Create Listing:

   • Users can create listings with title, description, and starting bid.
   • (Optionally) add image URL and category.

3. Active Listings:

   • Default page displays all active listings.

4. Listing Page:

   • View details, add/remove from Watchlist.
   • Place bids, close auctions, display winner.
   • Users can comment on listings.

5. Watchlist:

   • Users access their Watchlist for saved listings.

6. Categories:

   • View listings by category.

7. Admin Interface:

   • Admins manage listings, comments, and bids.

Software Screencast
For code details, check out the GitHub Folder.

Challenge 4: Email Client Specifications

1. Send Mail:

   • Send emails via POST request.
   • Redirect to Sent mailbox.

2. Mailbox:

   • Load mailbox using GET requests.
   • Display email details and status.
   • Update views for navigation.

3. View Email:

   • Show email content on click.
   • Mark emails as read.
   • Update views accordingly.

4. Archive/Unarchive:

   • Archive or unarchive emails.
   • Use PUT requests to update email status.
   • Load Inbox after changes.

5. Reply:

   • Allow replying to emails.
   • Pre-fill recipient, subject, and body.

Software Screencast
For code details, check out the GitHub Folder.

Challenge 5: Social Network Specifications

1. New Post:

   • Users create text-based posts.
   • Posts submitted via text area and button.

2. All Posts:

   • Display all user posts, most recent first.
   • Include user, content, timestamp, and likes.

3. Profile Page:

   • Clicking a username shows user's profile.
   • Display follower/following counts.
   • Show user's posts, allow follow/unfollow.

4. Following:

   • "Following" link displays followed users' posts.
   • Limited to signed-in users.

5. Pagination:

   • 10 posts per page, "Next" and "Previous" buttons.

6. Edit Post:

   • Users edit their posts.
   • Edit without full page reload, secure against editing others' posts.

7. Like/Unlike:

   • Users toggle post likes asynchronously.
   • Update like counts with JavaScript.

Software Screencast
For code details, check out the GitHub Folder.

Challenge 6: Final Project Requirements

1. Distinctiveness and Complexity:

   • Create a web application distinct from other course projects.
   • Ensure it is more complex than previous projects.
   • Avoid projects that mimic social networks or e-commerce sites.
   • Justify distinctiveness and complexity in the README.md.

2. Django and JavaScript:

   • Utilize Django on the back-end with at least one model.
   • Implement JavaScript on the front-end.

3. Mobile-Responsive:

   • Ensure your web application is mobile-responsive.

4. README.md:

   • Include a comprehensive writeup in the README.md.
   • Add a "Distinctiveness and Complexity" section explaining justification.
   • Describe each file's purpose and contents.
   • Provide instructions for running the application.
   • Include any essential information for the staff.
   • List Python packages in a requirements.txt if needed.
   • Aim for a README.md of around 500 words.

Software Screencast
For code details and complete project documentation, check out the GitHub Folder.
Page is up and running @ quizford.xyz.