Giter Club home page Giter Club logo

go-contacts-app's Introduction

Full-stack contacts app

  • Contacts Book is a full-stack contacts app that allows you to add, edit and delete contacts. It also allows you to search for contacts by either name or phone number (though the search isn't as smart as Google's... speaking of Google, the design of it is inspired by Google's very own contact app). It was a project to learn Golang and web-frameworks like Gin-gonic.

  • I ultimately decided on Gin-gonic due to the availability of resources and simplicity of the guides. I also considered Fiber, which was known for being similar to Express.js, but decided against it due to lack of familiarity with the language. Also looked into Echo and Gorilla/Mux, but resources were limited and the latter seems to be more of router/library rather than a framework.

  • Frontend: React.js, MUIv5 for component libraries and styling

  • Backend: Golang + web-framework serving RESTful API: Gin-gonic

  • Database: MongoDB

Demo

  • Paginated contacts list

    Pagination.mov

  • Create Contact and Searching for it

    Create.mov

  • Search returns multiple matching documents (name or number)

    Search.mov

  • Update Contact

    Update.mov

  • Delete Contact

    Delete.mov

APIs developed

Contacts API

Method Address Description
POST /contact Create contact
GET /contact/:contactId Retrieve single contact data
GET /contact Retrieve all contact data
PATCH /contact/:contactId Update single contact data
DELETE /contact/:contactId Delete single contact data

User API TBD

Method Address Description
POST /user/register Create user
POST /user/signin Login user (send jwt)
POST /user/logout Logout user (if sessions)
GET /user/:userId Retrieve user details
GET /user Retrieve all user deatils
PATCH /user/:userId Update user details
DELETE /user/:userId Delete user
POST /token/refresh Refresh JWT token
POST /token/blacklist Blacklist token (if jwt)

TBD Swagger Documentation - WIP

Difficulties Encountered

  • Learning Golang was challenging as a SWE bootcamp-er, with no formal training on data structures, how memory works (pointers -- passing by value, passing by reference, structs, BSON v. JSON), it required a bit more thinking to statically type variables, in addition to somewhat unfamiliar syntax. However, it was an excellent learning experience and hope that it will help me become a better software engineer going forwards.

  • React --> It took me some adjusting to use JavaScript after spending the last 3 weeks in Python (for leetcode practice.....), but it was overcome relatively quickly compared to Golang since JS is rather "unstructured" compared to latter.

  • HTML/CSS --> Have not had much practise for awhile now, so it took some time to get back into figuring out how to align/center things. I tend to have an overreliance on display: flex as i think it fixes all centering problems (provided i know what's happening...), but it seems to serve its purposes so far, when used in conjunction with Grids to create the right layout and even responsive when using breakpoints correctly.

Things to work on

  • Backend:

    • task: swagger to document API
    • jwt authentication for account creation, and API security
      • task on looking into auditing and logging requests for security and block anomalous requests (use ML if necssary)
      • Elastic Kibana?
    • add more fields to contact model
    • add validation to controller
    • look into implementing cloudinary for image upload
    • look into unit testing (testify)
  • Frontend:

    • BUGS:
      • when searching for a string while on a page that is not 1, the results are not correct as the page retained the previous page number.
        • to fix by resetting page number to 1 when search is triggered -- however that will require refactoring the code where the state is elevated to the parent component or possibly context/redux
      • Edit page: occasionally, after editing and saving the contact details, the page does not show the updated details.
        • possibly because the page redirecting (used navigate /view/contactId to redirect) is rendering faster than the the database saves the details, so it retrives the old information.
          • to perhaps add in a delay to allow database to update (not sure if there's another more optimal solution)
    • refactor haphazard code (e.g. move repeated code (e.g. fetching data) to services.js)
    • add validation in frontend
    • add login/register page
    • work on CSS, fix alignment issues and add dialogs/modals (instead of coding with window/alerts/confirms)
    • Look into unit testing (?jest)

Resources

Wireframes (intended design - TBD (maybe))

image
image

go-contacts-app's People

Contributors

c-zhenhao avatar

Stargazers

 avatar

Watchers

 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.