My First Open Source Project.
Tags: react, opensource, productivity, node
Published: 2019-02-19 10:52:58

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.

![Server side folder structure](https://thepracticaldev.s3.amazonaws.com/i/xlbokwywxe8n2dr9tolw.png)

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

{% github zafar-saleem/NodeScalableArchitecture %}

The blog on how to write above structure can be found on my medium profile [here](https://medium.com/@zafarsaleem/writing-scalable-architecture-for-node-js-2b58e0523d7f).

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.

![](https://thepracticaldev.s3.amazonaws.com/i/6tqhwpu5aoool9970nk7.png)

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

{% github zafar-saleem/react-login %}


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 
{% github zafar-saleem/timeoff-app %}


Server
{% github zafar-saleem/timeoff-server %}

*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.*