Saga is a model blog, made as part of the Full Stack Nanodegree at Udacity.
Saga is deployed on Google App Engine and can be acccessed online here. It is coded in Python 2.7, using the Jinja2 templating language. As well as the ability to make posts, it includes properly validated user accounts, individual pages for each user, and comment-making capabilities.
In order to deploy a copy of this project yourself, your first step is to gain access to the Google Cloud Console, accessible here. Once you have signed up, the option to create a new project should be available in the blue top bar of the Google Cloud Console.
The second step is to install Google Cloud SDK, available here. A guide to installing this and the app engine components can be found here.
To gain access to the code, it should then be cloned from GitHub using git.
Once the code has been cloned onto your computer, you can then change it as you would like. To preview by running the project locally, open Google Cloud SDK (set up with appropriate components as previously described). Navigate to the directory containing the Saga project,cd <your complete file pathway> and then type the command:
dev_appserver.py app.yaml
Visiting http://localhost:8080/ in a web browser will then show you a copy of the project.
To shut down the local server, and thus gain access to the command line again, press ctrl+c (or cmd+c).
To deploy the project to its own website, making sure you are in the directory containing the project, run the command:
gcloud app deploy app.yaml index.yaml
as per this set of instructions.
There may be some delay in accessing a user's blog homepage, since the indexes need to update.
All of this is outlined in more detail in this tutorial.
There are also quite a few features staged for future completion, and for which the ground-work has been laid. Any assistance with these updates would be appreciated.
Blog hero images, blog names and blog color palettes are three key areas in which it would be relatively simple to add user customization. The hero image, though currently randomized, already has a column in the User database, and with an additional form could easily be changed to any of the other options.
Blog names are a simple string, and although there is no column in the User database as of yet, there is a template variable with a simple placeholder already in the bloghome.html template. All that is required is that the user be asked what they'd like it to be.
Color palettes are a slightly more complex matter. Very likely a CSS file would need to be created for each of the color palettes, and an aethetic way of displaying these options to the user would need to be designed. Nevertheless, implementing these is a simple matter of storing the name of the CSS file in the User entity and inputting it into a template variable in the head of the bloghome.html template.
All of this is likely to need a handler with many of the same features: user validation, forms and form entry, and entering the data into a database. It might most easily be done with a variant of the newpage.html template and the NewPost handler.
The navigation links in the bar directly underneath the header are currently unused. These represent 2 future features for which some interesting new handlers would have to be created. The About page would ideally contain a flattering placeholder description, until visited by the owner, who would then be redirected to a page with the newpage.html template, which would allow the user to write their own text for this page.
The archive page would contain all the headings for all the blogposts done by that user, each being a permalink to its post. This would provide an overview for the entire blog. Not an especially difficult feature to code, although finding the right design might be somewhat harder.
-
Comments are currently never visible when any page is loaded. This is not good for editing comments, particularly.
-
A fair amount of code could be sensibly refactored into functions, and split into multiple modules/files.
-
Icon accessibility issues: interactive icons should have aria-hidden alternatives to make sure they're visible to screen-readers
-
A simple read-though to check how intuitive the code is.
Steven Huffman's videos in the Udacity course CS253 provided much of the guidance in creating this project.
I derived the orginal structure of the comment HTML from here.
Using strftime within the Jinja2 template was originally suggested by tux21b on this Stack Overflow page.
All photographs in this project are published by Unsplash, and are free for any use. The Unsplash licence can be read here.
Saga is released under the MIT licence which can be read here, copywrite Steven Huffman, Udacity, and Siobhan Hokin.