Networky improves your relationships with the people in your life whom provide value to you by reminding you to periodically provide value to them!
Through spaced repetition of social check-ins at customizable intervals, this beautiful web application facilitates the process of turning acquaintances into friends over time, helping you stay relevant in your contacts' lives.
Networky also gives you the power to make your contacts feel remembered by allowing you to add both a biography and any number of dated notes to each of your contacts, and makes it easy to reach out by bringing all of your contacts' social links into a single place.
Learn more below, or check it out here: https://networky.io/
When I first began networking in tech, I would often meet somebody new and then forget to follow up with them in a timely fashion- by the time I finally remembered to reach out again, weeks or months had gone by and neither of us could remember much about the other person- a bit awkward, and not the best start to building a meaningful friendship!
I built Networky to solve this problem once and for all.
| Feature | Description |
|---|---|
| Contacts | Contacts can be added, edited, or deleted at any time. At this time, you can add up to 100 contacts. |
| Keep In Touch | Set a social check-in interval for each contact, and Networky will let you know when your next check-in is due. |
| Keep It Together | Networky keeps every personal and professional link for your contacts in one place. Quickly and easily reach out via whichever channel you desire with one click. |
| Biography and Notes | Add a biography and dated notes to your contacts, helping you to remember personal details and what you talked about last. At this time, you can add up to 100 notes per contact. |
| Categories | Organize your contacts into categories like coworkers, referrals, and friends. You can have up to 10 different categories, and name those categories however you like. |
| Versatile Sorting | Sort your contacts by check-in due, alphabetically, by company, and more! |
| Live Search | The search function queries name, company, position, biography, and notes to find the person you're looking for instantly. |
| Customization | Customize several different options in Settings to make Networky work for you. |
| Themes | Networky also includes several beautiful light and dark themes to choose from. |
I love working with React, but the necessity of lifting up and drilling down shared state has always felt cumbersome. While useContext() is fine for sharing state among components in simple applications, Networky's size and complexity demanded a more robust state management solution.
This is why I opted to use Redux to manage the vast majority of my state- specifically the React-Redux toolkit, which made store setup and reducer/action creation easy. I used two main 'slices' of state- one to store user data fetched from the backend, and the other to control the behavior of ui components. Several components also have their own minor local state.
In order to remain true to my initial vision (and because it's fun), I built every component from scratch, and hand coded every line of JavaScript and CSS. The structure and flexibility of my components improved as the project went on as I experimented with more complex props. I often extracted new components from others as they grew in complexity, doing my best to keep every piece of Networky's frontend as modular, flexible, and reusable as possible.
I used several NPM packages on the frontend:
React-Router is used to control the display of certain components based on the URL route.
Date-Fns is used to perform calendar-arithmetic and flexible Date() object conversion.
Axios is used to communicate with the backend.
BACKEND TECH: Node.js, Express, Mongoose/MongoDB, JSON Web Token, BCryptJS, Node Mailer, CORS, Morgan, Validator
Networky's backend is built with Node.js and Express.
The MVC paradigm is used for organization on the backend. Models, Routes, and Controllers are segregated and highly modularized to make understanding and updating the code as simple as possible.
User data is stored in a MongoDB database, using Mongoose to manage the creation and editing of that data.
User session authentication is handled with JSON web tokens, which are verified on every protected CRUD request from the frontend.
User passwords are securely hashed with BCryptJS before being stored in the database.
System emails for new account email verification and password resets are implemented via Node Mailer.
CORS is used to ensure the backend only accepts requests from networky.io.
Morgan is used for server-side logging of requests.
Validator is used to validate user inputs.
- 300+ hours spent designing, prototyping, coding, refactoring, and polishing
- 130+ issues closed throughout development
- 5,224 lines of JavaScript
- 2,704 lines of CSS
- 1,357 lines of comments (because documenting your code is important!)
- 35 hand built components
- 1,397 lines of JavaScript
- 561 lines of comments
- 20 routes
- 20 controllers
- 3 models
As time permits, there are several optimizations and improvements that I'd like to integrate into Networky in future updates.
Potential future features/optimizations include:
- Integrate Cloudinary to allow users to upload contact photos themselves
- "Remember Me" option when logging in to disable automatic inactivity logout
Expandable/Shrinkable contact cardsDONE- Implement React Error Boundary to catch any errors not caught by my custom error handling component
Allow user to set an "action due" string to be associated with the next check-in date (Examples: "Send thank you email", "Ask how the kid's soccer tournament went", etc)DONERefactor the way the 'uncategorized' category worksDONE- Refactor auth token implementation to be cleaner
- Familiarized myself with Redux, and with it, many principles of functional programming and the advantages of that paradigm
- Practiced building a complex project with MVC-based architecture, making my backend code more organized and maintainable than ever before
- Practiced building (and organizing) a wide range of components which became more and more versatlie as the project went on
- Learned how to handle authentication via JSON web tokens
- Learned how to effectively connect a React frontend to a Node backend via API requests and token verification
- Learned how to auto-generate and send emails to users via Node Mailer
To report a bug or request a new feature, file an issue here.
Networky is a thank-you gift to the incredible community of software engineers at 100Devs, and is completely free.
In addition, Networky will never sell or share your contact data with anybody, ever.
That said, building Networky takes a lot of my time, and keeping it online costs money. Your donation, no matter how small, will help me keep it online and continue developing new features. Thank you and I hope you enjoy networking with Networky!
All original code in this project is ©Adam Morsa. All rights reserved.
Networky is currently closed-source.
If you are actively recruiting a software engineer, I'd be happy to facilitate a code review. Reach out to me at adam@adammorsa.com.
Take a look at these other awesome projects from my portfolio!
Magic Task Timer: https://github.com/ramblingadam/magic-task-timer
Animal Crossing: New Horizons Database: https://github.com/ramblingadam/acnh
X-Wing VS TIE Fighter: https://github.com/ramblingadam/tic-tac-starwars
