Giter Site home page Giter Site logo

delta94 / go-to-do-app Goto Github PK

View Code? Open in Web Editor NEW

This project forked from schadokar/go-to-do-app

0.0 0.0 0.0 867 KB

This is a to-do list application. It's server is created in Golang, db is mongodb and client is in React.

License: MIT License

HTML 9.25% CSS 2.67% JavaScript 52.20% Go 35.88%

go-to-do-app's Introduction

๐Ÿ“ Go To Do App

This is a to-do list application. The complete tutorial is published on my blog.

Server: Golang
Client: React, semantic-ui-react
Database: Local MongoDB

The offline version of application Get Shit Done is hosted at

๐Ÿ”— https://schadokar.github.io/go-to-do-app/

๐Ÿ”— http://getshitdone.surge.sh


Highlights

  1. DB connection string, name and collection name moved to .env file as environment variable. Using github.com/joho/godotenv to read the environment variables.
  2. feature/cloud-native-deployment provided by abdennour. Thank you @abdennour to dockerize it. His features supports both Docker and Kubernetes.

Application Requirement

golang server requirement

  1. golang https://golang.org/dl/
  2. gorilla/mux package for router go get -u github.com/gorilla/mux
  3. mongo-driver package to connect with mongoDB go get go.mongodb.org/mongo-driver
  4. github.com/joho/godotenv to access the environment variable.

react client

From the Application directory

create-react-app client

๐Ÿ’ป Start the application

  1. Make sure your mongoDB is started
  2. Create a .env file inside the go-server and copy the keys from .env.example and update the DB connection string.
  3. From go-server directory, open a terminal and run go run main.go
  4. From client directory,
    a. install all the dependencies using npm install
    b. start client npm start

๐Ÿผ Walk through the application

Open application at http://localhost:3000

Index page

Create task

Enter a task and Enter

Task Complete

On completion of a task, click "done" Icon of the respective task card.

You'll notice on completion of task, card's bottom line color changed from yellow to green.

Undo a task

To undone a task, click on "undo" Icon,

You'll notice on completion of task, card's bottom line color changed from green to yellow.

Delete a task

To delete a task, click on "delete" Icon.


Author

๐ŸŒž Shubham Kumar Chadokar

I am software engineer and love to write articles and tutorials on golang, blockchain, and nodejs.
Please checkout my other articles on ๐Ÿ”— https://schadokar.dev ๐ŸŽ‰

References

https://godoc.org/go.mongodb.org/mongo-driver/mongo
https://www.mongodb.com/blog/post/mongodb-go-driver-tutorial
https://vkt.sh/go-mongodb-driver-cookbook/

License

MIT License

Copyright (c) 2019 Shubham Chadokar

go-to-do-app's People

Contributors

schadokar avatar nirajkvinit avatar

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.