Skip to content
Full-stack Reddit clone made in the NEAP stack.
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
db
migrations
screenshots
.gitignore
README.md
app.js
knexfile.js
package-lock.json
package.json

README.md

Full-Stack Reddit Clone

App Screenshot

Technologies used:

Node.js
Express
AngularJS
PostgreSQL
KnexJS - a SQL query builder
Bootstrap - to help with styling

Description

This Reddit Clone was my first ever Angular application. It is a full-stack CRUD application. I made this during the third quarter of a 6 month full-stack web development immersive program and I had one week window to complete this project.

Key Takeaways

I learned a lot about the Angular digest cycle and component lifecycle during this project.
I learned how to make a single page application and configure clean urls using HTML5 mode to allow for deep-linking.

App Walkthrough

Posts View

From here you can view all of the posts in your feed. You can see how long ago the post was made. You can also see how many up-votes and comments a post has received.

App Screenshot

Edit Post View

From this page you can edit the content of a post. When you click the edit post button the form is pre-filled with the existing information from the post. This allows you to only update the specific items that need to be updated.

Edit Page Screenshot

New Post Form

With the new post form a user can create a new post. As you can see in this screenshot the fields turn red until they are considered valid. The create post button is also disabled until the entire form is considered valid. Users are prompted with validation messages that inform them of the criteria they must meet to validate each field. Once the field is valid it will turn green to notify the user that they have met the criteria for the field. Finally once the entire form is valid the create post button is enabled.

New Post Form Screenshot

Filter/Search View

Users can filter their feed using the Sort By button. Users can sort posts in chronological or reverse chronological order. They can also sort by total votes or by post title. The posts will be dynamically sorted once a selection is made. Users can also type in the search field to dynamically search for a post. The user will only be shown the post(s) that match their search criteria.

Filter Screenshot

You can’t perform that action at this time.