My First Open Source Project.

Zafar Saleem — Tue, 19 Feb 2019 10:52:58 +0000

Developing web sites and apps are fun to do while working as an employee for employer or for clients. However, developing your own product is even more fun. I have been working the first part for sometime now. For the later, after getting plenty of free time lately. I started working on my own project.

I named this project TimeOff. Ideas are a lot like everybody else some are new others are existing ones. However, I went on choosing the one that already exist.

This project is all about vacation setter i.e. Employees can easily set vacations with easy to use user interface.

In this blog post I am going to describe this project.

The technology stack I used in this project is below.

Node
Express
Mongodb
React
Redux
Redux saga
React router

The server side implementation is scalable. All it needs is to keep implementing new services. The whole architecture is divided on below folder structure.

The complete repo of this architecture can be found on below repository.

zafar-saleem / NodeScalableArchitecture

A Scalable Node Architecture/Server. This repository contains a complete implementation of writing scalable nodejs server/architecture on my medium blog.

Node Server that scales / Node Architecture that scales

Note: This is a sample project for my blog on medium which can be found here.

Get Started

Clone this repository
Run npm install inside its root folder.
run nodemon index.js (assuming nodemon npm package is already installed in your systems)

Client side for this project

To test this project using browser I implemented the client side of this project which is in react and redux. The blog for that could be found here

Real world project

I developed a complete real world project using this architecture which can be found here. Please go ahead a explore it and leave feedback if you can.

View on GitHub

The blog on how to write above structure can be found on my medium profile here.

I will explain the parts that focuses on my open source project than from my blog above where details description is provided on how to write that folder structure.

The controllers. Since every endpoint is a service on its own. Every service has a controller which points to its respective service in services folder. Controllers provides an endpoint to clients and interacts with services to process data.

A single service is a function or a set of functions. One service can reside in single file or multiple files.

For example authentication service has one file which has login and registration services.

Admin has one file and has several services such as creating new employee, fetching employee list, updating employee profile etc.

Controller is an express route, that exposes API end point to client.

For more end points and services please go ahead and explore controllers and services folders on above repository.

Time for client side implementation. Client side is implemented in react and follows the redux state management library pattern. Below is the folder structure.

The boilerplate of this project could be found in this repository.

zafar-saleem / react-login

A client side implementation of authentication using react.js for my blog on medium. This is the second part of my previous blog on how to implement scalable node.js server.

User Authentication using react

Note: This is a sample project for my blog on medium which can be found here

Before getting started

Before using this project please make sure you get the server side running which can be found here

Get Started

Clone this repository
Run npm install inside its root folder.
run npm start
Go to http://localhost:3000 in your browser to see it in action.

Real World Project

I implemented real world project using this architecture which could be found here

View on GitHub

It has all the standard redux concepts. Actions folder has list of actions, reducers has reducers list which is divided into admin and employees parts. Components have list of components, sagas have list of sagas and services with all list of services.

The whole application is divided into two sections admin and employees.

Admin is the one who controls the whole application and all employees account. Employees have control over their account and set of vacations they set.

That is the whole project I developed and made it available open sourced.

I hope you like and please leave a feed back or make contributions with issues and pull request.

Below are the links to these projects on my github.

Client

zafar-saleem / timeoff-app

TimeOff is an application that allows companies' employees to set vacations before they begin taking their time off. Implemented in modern tech stack i.e. React, Redux, Redux Saga.

Note

This project is no longer maintained on this repository. Please head here for further details and up to date project.

View on GitHub

Server

zafar-saleem / timeoff-server

TimeOff is an application that allows companies' employees to set vacations before they begin taking their time off. Implemented in modern tech stack i.e. Node, Express, MongoDB.

Note

This project is no longer maintained on this link. Please head here for up to date project.

View on GitHub

Note I wrote a blog post about this project already on freecodecamp but yet to be published. The main idea of this post and that, is the same but the approach of writing them are different. The main purpose of this blog post is to write my own open source project than working for employer or specific client.

DEV Community: Zafar Saleem

My First Open Source Project.

zafar-saleem / NodeScalableArchitecture

A Scalable Node Architecture/Server. This repository contains a complete implementation of writing scalable nodejs server/architecture on my medium blog.

Node Server that scales / Node Architecture that scales

Get Started

Client side for this project

Real world project

zafar-saleem / react-login

A client side implementation of authentication using react.js for my blog on medium. This is the second part of my previous blog on how to implement scalable node.js server.

User Authentication using react

Before getting started

Get Started

Real World Project

zafar-saleem / timeoff-app

TimeOff is an application that allows companies' employees to set vacations before they begin taking their time off. Implemented in modern tech stack i.e. React, Redux, Redux Saga.

Note

zafar-saleem / timeoff-server

TimeOff is an application that allows companies' employees to set vacations before they begin taking their time off. Implemented in modern tech stack i.e. Node, Express, MongoDB.

Note