Made with my mentor at Bloc.
We built the Frontend using AngularJS and Backend implemented using Rails as an API.
Build an application that allows users to create self-destructing to-do lists.
View Active Tasks
As a user, I want to see my active tasks in a list as my default view
Hide Old Tasks
As a user, I want completed tasks and tasks older than seven days hidden from my main task views automatically
View Past Tasks
As a user, I want expired and completed tasks presented in a separate view
Create New Tasks
As a user, I want to submit new tasks with a description, priority level, and three states: expired, completed or active
Mark Tasks Complete
As a user, I want to mark tasks as complete
User Sign Up
User Sign in and Out
User Profile
Create To-Do Items
Seeding Data
Mark To-Do Items as Complete
Displaying Time Remaining
Delete Expired To-Do Items
Ruby on Rails / Angular
A starter application for student projects in Bloc's Frontend Web Development Course.
Start by cloning the repository:
$ git clone https://github.com/Bloc/bloc-frontend-project-starter.git <your-frontend-project-name>
This will be your personal project. So all of the past commit history that we used to build this starter app aren't needed. Also you will want to be able to push/pull code from your personal remote (Github) repository and NOT Bloc's remote (Github) repository.
Remove the existing local Git repository:
$ rm -r -f .git
Initialize a new Git repository, add all of these existing files, and commit them:
$ git init
$ git add .
$ git commit -m "initial commit"
Go to Github and create a new repository. Add that new repository as the proper remote. Then push your initial commit.
$ git remote add origin <URL TO NEW GITHUB REPO>
$ git push origin master
The project uses Node to run a JS server in development. This will be important when we want to use urls /album or /collection instead of the basic album.html or collection.html. It may help to review our resource on NPM and package.json files.
Install the project dependencies by running:
$ npm install
Run the application server:
$ npm start
The server will start up. To stop the server, press cntrl + c.
To use the application with the Live Preview functionality of the Brackets text editor, go to File > Project Settings and add http://localhost:3000 to the Base URL field.
The text in the application will not update on every keystroke, but changes will automatically push when you save the file.
├── LICENSE
├── README.md
├── app
│ ├── assets
│ │ └── images
│ │ └── bloc-logo-white.png
│ ├── pages
│ │ └── index.html
│ ├── scripts
│ │ └── app.js
│ ├── styles
│ │ └── style.css
│ └── templates
│ └── home.html
├── package.json
└── server.js
Add images to the app/assets/images directory. To reference images in HTML, use the path /assets/images/<image file name>.jpg. For example, to include the image called bloc-white-logo.png, the path for the src attribute in the HTML would be:
<img src="/assets/images/bloc-white-logo.png">Note: A sample image has been added to app/images. To remove the image from the application, run the following command from the root of repo:
$ rm -f app/assets/images/bloc-white-logo.pngTo reference any other assets, like the music in Bloc Jams, use the path assets/<asset-type>/<asset-file-name>.
The templates directory should hold any HTML files used as templates in Angular states configured by UI Router. All other HTML files belong in the pages directory.