Giter Club home page Giter Club logo

todomvc-plusplus's Introduction

TodoMVC++ : Taking TodoMVC To Production

TodoMVC++ is the companion application for Zero to Production with Node.js. To learn more about how this application works, check out the video course on Frontend Masters.

This application is based on TodoMVC, and specifically on a Vue.js implementation by Evan You.

Running Locally

Installing Node.js and npm

This application has been tested on Node.js 6 and npm 3 - these packages should be available for download here - choose the "Current" version for download.

Installing Node.js modules

Once you have Node and npm installed and this repository downloaded, you'll need to install the application's dependencies. Do this with:

npm install

For development you'll probably want to install the following modules globally:

npm install -g grunt-cli sequelize-cli

Setting up the database

To run this application locally, you'll require a Postgres database. On a Mac, the easiest path to installing Postgres is Homebrew. Once installed, grab Postgres with:

brew update
brew install postgres

If Postgres is installed using the method above, you should now have a few Postgres administrative commands on your system path. Begin by firing up another Terminal tab and starting the database:

postgres -D /usr/local/var/postgres

Next, create the development and test databases:

createdb todos
createdb todos-test

If Postgres is not installed locally, you can setup a free instance as follows:

  • visit https://elephantsql.com
  • login and setup a free tiny turtle instance
  • goto "Details" and copy the url. It should look something like this postgres://abcdefg:icRAC...
  • in the project, copy config/test.js to config/user.js
  • set config.databaseUrl to your copied postgres url
  • don't forget to run sequelize db:migrate

Apply the database migrations:

sequelize db:migrate

Copy over static assets:

grunt collect_static

Running the application

To run the application in development mode:

grunt

To run the application simulating production settings:

NODE_ENV=production
grunt collect_static
npm start

License

MIT

todomvc-plusplus's People

Contributors

dannyschnacky avatar gantoine avatar jamesmgreene avatar juan267 avatar kwhinnery avatar lucasxyang avatar maurop123 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

todomvc-plusplus's Issues

Uglify JavaScript during build process

When we build static assets for production, we currently minify CSS but don't compress our javascript. We should uglify our JavaScript using Grunt, and add that to the collect_static task.

Track custom events for TODO filters

We'd like to know how many users are taking advantage of the filters on our TODO list. Using universal analytics, track custom events with the category filter and the action one of all, active, and completed.

Update TODO list (for new TODOs) via web socket

Right now, we immediately add a new todo to our Vue component's list, even before we save it on the server. This gives the appearance that the addition is happening in real time.

Let's implement this feature with socket.io. On the client side, create the TODO via ajax like we are right now, but don't automatically add the TODO to the Vue component's list. Instead, create a socket.io client-side event handler to add the TODO to our list when an event is emitted from the server.

On the server, whenever a new Todo is created, broadcast a message to all connected sockets that a new Todo has been added. Then, every connected client's UI should update in real time as TODOs are added!

Issue with user authentication when I try to migrate

Hello,

When I run sequelize db:migrate I get the error below:

Sequelize [Node: 6.10.1, CLI: 2.7.0, ORM: 3.30.4]

Loaded configuration file "db/database.js".
Using environment "development".
Unable to connect to database: SequelizeConnectionError: password authentication failed for user 

How do I fix it? So far nothing on Google has worked.

Thanks.

Add a "light" and "dark" theme to the TODO UI

Add a UI element to the bottom of the Todo list UI that allows the user to select a "light" or a "dark" theme for the UI. Add a class to the main UI div tag to allow you to add styling for a new "dark" theme.

Bonus points - save the user's theme preference in localStorage and load it when the page loads.

Update styles for Todos page

Using our Sass stylesheet, update the color and font for the main title to something a little more readable. Use the same color for the links in the footer of the UI. Make sure that you can change the color for both using a single variable!

installation issue

npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node scripts/build.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs node-sass
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls node-sass
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\neetesh\todomvc-plusplus\npm-debug.log

Persist the "completed" status of TODO items using the REST API

Right now, the UI doesn't update the completed status of a TODO item, even though yesterday we added that functionality using the REST API. Let's update our TodoMVC UI to keep track of these changes, and make use of the new property we added to the database.

init_static not working when running grunt

I have tried to run grunt to build from the README and I get an error that init_static is not a task

grunt.registerTask('collect_static', 
    ['init_static', 'sass:dist', 'browserify']);

Was this fixed before I joined or am I missing something?

Add an npm script as a shortcut for the Sequelize migrate command

In case someone doesn't have the Sequelize CLI installed globally, it would be nice to be able to at least execute the migrations for the app without installing sequelize-cli globally. Create an npm script that accomplishes this task. Then, create a Grunt shell command which executes this script.

There might be something there already that does this as part of the startup process, but let's make a special purpose npm script.

For production environment, include Google Analytics page view tracking

Implement Google Analytics pageview tracking. Create one pageview on initialization, and then others in the router used by the Vue application, such that #/all and similar count as pageviews as well.

Only execute the tracking code in the production environment! Make sure that you accurately check this in your code - remember that browserified code will not have access to process.env.NODE_ENV in the browser.

SequelizeConnectionError: read ECONNRESET

Getting this issue while running the migrate command on Windows
Unable to connect to database: SequelizeConnectionError: password authentication failed for user "XXXXX"

Sequelize migration error

I'm having the following error when trying to run
sequelize db:migrate

Sequelize [Node: 8.4.0, CLI: 2.8.0, ORM: 1.7.5]

Loaded configuration file "db/database.js".
Using environment "development".
TypeError: Parameter "url" must be a string, not object
    at Url.parse (url.js:102:11)
    at Object.urlParse [as parse] (url.js:96:5)
    at new Sequelize (/mnt/shared/lib/node_modules/sequelize/lib/sequelize.js:59:22)
    at getSequelizeInstance (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/lib/tasks/db.js:394:12)
    at getMigrator (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/lib/tasks/db.js:403:21)
    at Object.task (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/lib/tasks/db.js:23:14)
    at /home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/lib/helpers/gulp-helper.js:17:23
    at tryCatcher (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/promise.js:693:18)
    at Async._drainQueue (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/async.js:133:16)
    at Async._drainQueues (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/async.js:143:10)
    at Immediate.Async.drainQueues (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:781:20)
    at Url.parse (url.js:102:11)
    at Object.urlParse [as parse] (url.js:96:5)
    at new Sequelize (/mnt/shared/lib/node_modules/sequelize/lib/sequelize.js:59:22)
    at getSequelizeInstance (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/lib/tasks/db.js:394:12)
    at getMigrator (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/lib/tasks/db.js:403:21)
    at Object.task (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/lib/tasks/db.js:23:14)
    at /home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/lib/helpers/gulp-helper.js:17:23
    at tryCatcher (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/promise.js:693:18)
    at Async._drainQueue (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/async.js:133:16)
    at Async._drainQueues (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/async.js:143:10)
    at Immediate.Async.drainQueues (/home/ubuntu/.nvm/versions/node/v8.4.0/lib/node_modules/sequelize-cli/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:781:20)

Add boolean status to the back end for the Todo model

The application today doesn't track the status (complete/incomplete) of a Todo item. Update the REST API (not the front end for now) to create new todo items with a default completed state, and for the update operation to toggle an item complete or incomplete.

Don't send "Powered By Express" header with HTTP responses

By default, Express sends an X-Powered-By header that indicates that Express is the web server behind the request. Generally speaking, you don't want to allow evildoers to know specifically what technology is serving your page, to prevent targeted attacks.

Disable this response header by any means necessary. I think there's some middleware that does this? Maybe an Express configuration option?

user.js under db missing 'use strict'

the database.js file under db is missing 'use strict' which cause issue "Block-scoped declarations (let, const, function, class) not yet supported outside strict mode" when you try to do db:migrate

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.