Light

waffledood / cs50w-projects Goto Github PK

View Code? Open in Web Editor NEW

1.0 2.0 0.0 992 KB

A repository of full stack web projects developed for CS50W's Projects

HTML 32.35% CSS 1.81% Python 47.22% JavaScript 18.61%

cs50w-projects's Introduction

CS50W-Projects

A repository of full stack web projects developed for Harvard's CS50W's Projects. These projects are built with Django & React.

The full list of projects can be found here: link.

The projects built are listed below & represented by their corresponding branches:

Project 0 - Search (project0 branch)
Project 1 - Wikipedia (project1 branch)
Project 2 - Commerce (project2 branch)
Project 3 - Mail (project3 branch)
Project 4 - Network (project4 branch)
Project 5 - Anki (project5 branch)

Discarded Project(s):

Project 5 - Airbnb (project5-redacted branch)

Future plans for the projects:

Deploy these projects to a server.
Incrementally improve these projects, in terms of functionality & design.

cs50w-projects's People

Contributors

Stargazers

Watchers

cs50w-projects's Issues

You may encounter a redirect notice when using the “I’m Feeling Lucky” button. Not to worry! This is an expected consequence of a security feature implemented by Google.

Like Google’s own, your search bar should be centered with rounded corners. The search button should also be centered, and should be beneath the search bar.

Markdown to HTML Conversion: On each entry’s page, any Markdown content in the entry file should be converted to HTML before being displayed to the user. You may use the python-markdown2 package to perform this conversion, installable via pip3 install markdown2.

Random Page: Clicking “Random Page” in the sidebar should take user to a random encyclopedia entry.

When the page is saved, if an encyclopedia entry already exists with the provided title, the user should be presented with an error message.

If the entry does exist, the user should be presented with a page that displays the content of the entry. The title of the page should include the name of the entry.

On the Google Search page, there should be links in the upper-right of the page to go to Image Search or Advanced Search. On each of the other two pages, there should be a link in the upper-right to go back to Google Search.

Edit Page: On each entry page, the user should be able to click a link to be taken to a page where the user can edit that entry’s Markdown content in a textarea.

Find pages with… “this exact word or phrase:”

Watchlist: Users who are signed in should be able to visit a Watchlist page, which should display all of the listings that a user has added to their watchlist. Clicking on any of those listings should take the user to that listing’s page.

Your website should have at least three pages: one for regular Google Search (which must be called index.html), one for Google Image Search, and one for Google Advanced Search.

Create Listing: Users should be able to visit a page to create a new listing. They should be able to specify a title for the listing, a text-based description, and what the starting bid should be. Users should also optionally be able to provide a URL for an image for the listing and/or a category (e.g. Fashion, Toys, Electronics, Home, etc.).

On the Google Image Search page, the user should be able to type in a query, click a search button, and be taken to the Google Image search results for that page.

CS50 Project 0 (Search) Deliverables

Users who are signed in should be able to add comments to the listing page. The listing page should display all comments that have been made on the listing.

Search: Allow the user to type a query into the search box in the sidebar to search for an encyclopedia entry.

On the Google Search page, the user should be able to type in a query, click “Google Search”, and be taken to the Google search results for that page.

Find pages with… “none of these words:”

The textarea should be pre-populated with the existing Markdown content of the page. (i.e., the existing content should be the initial value of the textarea).

Otherwise, the encyclopedia entry should be saved to disk, and the user should be taken to the new entry’s page.

If the query matches the name of an encyclopedia entry, the user should be redirected to that entry’s page.

Consistent with Google’s own CSS, the “Advanced Search” button should be blue with white text.

The CSS you write should resemble Google’s own aesthetics.

The view should get the content of the encyclopedia entry by calling the appropriate util function.

Index Page: Update index.html such that, instead of merely listing the names of all pages in the encyclopedia, user can click on any entry name to be taken directly to that entry page.

Find pages with… “any of these words:”

Once the entry is saved, the user should be redirected back to that entry’s page.

Users should be able to enter a title for the page and, in a textarea, should be able to enter the Markdown content for the page.

Find pages with… “all these words:”

CS50 Project 2 (Commerce) Deliverables

On the Google Advanced Search page, the user should be able to provide input for the following four fields (taken from Google’s own advanced search options)

If the query does not match the name of an encyclopedia entry, the user should instead be taken to a search results page that displays a list of all encyclopedia entries that have the query as a substring. For example, if the search query were ytho, then Python should appear in the search results.

The user should be able to click a button to save the changes made to the entry.

If the user is signed in, the user should be able to bid on the item. The bid must be at least as large as the starting bid, and must be greater than any other bids that have been placed (if any). If the bid doesn’t meet those criteria, the user should be presented with an error.

If the user is signed in and is the one who created the listing, the user should have the ability to “close” the auction from this page, which makes the highest bidder the winner of the auction and makes the listing no longer active.

Challenge for those more comfortable: If you’re feeling more comfortable, try implementing the Markdown to HTML conversion without using any external libraries, supporting headings, boldface text, unordered lists, links, and paragraphs. You may find using regular expressions in Python helpful.

Active Listings Page: The default route of your web application should let users view all of the currently active auction listings. For each active listing, this page should display (at minimum) the title, description, current price, and photo (if one exists for the listing).

If the user is signed in, the user should be able to add the item to their “Watchlist.” If the item is already on the watchlist, the user should be able to remove it.

Add an “I’m Feeling Lucky” button to the main Google Search page. Consistent with Google’s own behavior, clicking this link should take users directly to the first Google search result for the query, bypassing the normal results page.

Like Google’s own Advanced Search page, the four options should be stacked vertically, and all of the text fields should be left aligned.

New Page: Clicking “Create New Page” in the sidebar should take the user to a page where they can create a new encyclopedia entry.

If an entry is requested that does not exist, the user should be presented with an error page indicating that their requested page was not found.

Entry Page: Visiting `/wiki/TITLE`, where `TITLE` is the title of an encyclopedia entry, should render a page that displays the contents of that encyclopedia entry.

When the “Advanced Search” button is clicked, the user should be taken to the search results page for their given query.

Models: Your application should have at least three models in addition to the User model: one for auction listings, one for bids, and one for comments made on auction listings. It’s up to you to decide what fields each model should have, and what the types of those fields should be. You may have additional models if you would like.

If a user is signed in on a closed listing page, and the user has won that auction, the page should say so.

Clicking on any of the entry names on the search results page should take the user to that entry’s page.

Users should be able to click a button to save their new page.

Listing Page: Clicking on a listing should take users to a page specific to that listing. On that page, users should be able to view all details about the listing, including the current price for the listing.

CS50 Project 1 (Wiki) Deliverables

Entry Page

Index Page

#32

Search Page

New Page

Edit Page

Random Page

#46

Markdown to HTML Conversion

#47
#48

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.