Blogetty-blog-blog: Make A Blog Site #122
Make a scalable, single page blog app, and make it responsive. (Stretch: BEAUTIFUL and/or INNOVATIVE!)
Learners research award winning, innovative blog designs and use wireframing to pre-visualize their app and put some thought into their desired user experience. Learners will gain practice templating to render blog posts as different page views of a single page app. Learners will gain practice setting up a server using Express and/or Express-generator, and templating using Pug (or Handlebars, or equivalent).
Optional: Learners will set up a backend database such as SQL/Postgres. Learners will implement CRUD for their database so they can Create, Read, Update, and Delete blog posts.
An excellent way to learn how to set up a single page app that renders different information from a data file or database. Great for Learners who have blog content to share with the world, or are planning on writing a blog and creating a blog site. Here's your chance to make it exactly as you want!
Below, a set of recommended tutorials on Treehouse that take you through most of this process:
- Prework: Node.js Basics, NPM Basics
- Express Basics (includes explanation of pug templating). This tutorial uses building a blog site as its main example, so it takes you through most of the server-side work! ***
- Optional for those wishing to add a database to their blog site: SQL Basics track that includes four courses "SQL Basics," "Modifying Data with SQL," "Reporting with SQL," and "Querying Relational Databases."
- Wireframe of app that puts thought into excellent user experience to be implemented. Research existing blog websites that look and work great, or that are totally out-of-the-box design wise, then sketch (by hand or use a tool like Balsamiq ) your app's look and functionality, page by page. Have fun making it yours!
- Use responsive design principles (make it mobile first!)
- Optimize your assets on the front-end (your images should be web-ready, for example)
User should be able to:
- See an except of all or a selection of the latest blog posts on front/home page - excerpt may include blog post title, photo, description or except of main text, etc.
- Click on a specific blog post except to be taken to the full blog post.
- Navigate back to the home page at any time.
- Add one feature to your blog app that makes it innovative or add a special touch to set it apart from a generic blog site.
- User should be able to filter by a tag/topic and get a page that displays all the blog posts that have this topic as a tag
- User can easily share a blog post on social media via social media buttons
- Edit blog post
- Delete blog post
- Add a new blog post from a front-end user interface
- User can add comments to a blog post
- User can add emojis or otherwise evaluate a blog post (i.e., add a stars rating system)
- The artifact produced is properly licensed, preferably with the MIT license.
- App implements wireframe of excellent User Experience: 30points
- Optimization of front-end assets, like images: 10points
- Creates a single page app that renders different pages via the creation of routes: 30 points
- App built using modularity with scalability in mind: 30 points
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.