Code Monkey home page Code Monkey logo

madhukesh06 / everhour.com-clone Goto Github PK

View Code? Open in Web Editor NEW
4.0 1.0 0.0 783 KB

Everhour is a team-oriented time tracking software product, One of the properties of Everhour is Integration and synchronization with many kinds of business tools such as: Asana, Basecamp, GitHub, Trello etc.

Home Page: https://clone-everhour.netlify.app/

HTML 0.21% CSS 1.64% JavaScript 98.15%
react-hooks react-router reactjs redux redux-thunk chakra-ui customhooks express-js mongodb-atlas mongodb-compass

everhour.com-clone's Introduction

Project-Everhour

Time-Tracking website Clone

URL's :

Tech Stack (MERN)

Front-End :

  • React js
  • React-redux
  • React-redux-thunk
  • Chakra UI

Backe-End :

  • NodeJS
  • MongoDB
  • Express js
  • Mongoose

App Used :

Instructions to run locally

  1. git clone https://github.com/Madhukesh06/efficacious-talk-3107.git
  2. npm i
  3. npm run dev

Functionalities worked on

  • Created login and signup page and used react-redux-thunk to manage the authentication
  • Created fully responsive website

Hope you all will love the website we have clonned , Do give feedbacks , we are ready to take feedbacks and do the changes

everhour.com-clone's People

Contributors

aaryansinha16 avatar iammostak avatar madhukesh06 avatar nehasingh114 avatar utkarshongithub avatar

Stargazers

avatar avatar avatar avatar

Watchers

avatar

everhour.com-clone's Issues

Auth Frontend (Redux)

  • Integrating Redux in project
  • Integrating Thunk
  • LoginAction Logic
  • SignupAction Logic
  • LogoutAction
  • Maintaining Reducers & Types
  • Managing store

Backend Deployment

  • Testing backend on Local server
  • Integrating render.com for deploying
  • Testing live backend server

useTimeSheet

  • Create the logic and make custom hook properly

Bottom Component

  • Create same basic structure
  • Add minimum 5 dropdowns to them
  • Add Radio buttons
  • Make responsive
  • Try changing them with string

Custom Hooks

  • Create useStartStopHook
  • Create useTimeSheetHook

Task Input

  • Button to handle Modal.
  • Modal Header.
  • Modal Body.
  • Modal Footer.
  • Modal closing button.

Top Component

  • Create the component
  • Render it to the main Component
  • Give Radio button to it

Form State Management

  • State to track input changes.
  • Add task function.
  • Initial Ref for modal.
  • Discloser for modal.

Data Array

  • Array mapping for heading
  • content managing by state
  • icon animation

Time Stamp

  • Table
  • OnHover Effects
  • Adding Data
  • onPlay Button

Backend Local

  • Maintaining auth API
  • Managing Login endpoint (post)
  • Managing SignUp endpoint (post)
  • Token in Response
  • Collection for tasks

Title comp

  • Tab Headings
  • State management
  • handle function
  • Icons switching

Footer

  • Brand logo with the home route.
  • Categories card.
  • Social media handles.
  • Copyright, terms & and condition.

Accordian

  • Table Accordian
  • Responsive
  • Adding Details

TopMidSection

  • Create two Section
  • Add input and toggle button
  • Add date section
  • Add Today section to show Calander

Dashboard (UI)

  • Layout and Structure
  • Basic Styles
  • Entering Content
  • Transitions
  • Icons & logos

ActionCreater

  • Create actionTimer for time in string format
  • Make all the required files for that
  • Add all the logic and display accordingly

MainTopBar

  • Create main top bar
  • Add all section to it
  • Add other components which required

Pricing Page

  • Pricing Bars
  • Monthly/Yearly Conversion
  • Features
  • Country Add

Task Input Form

  • Labels.
  • Inputs.
  • Add task button.
  • Save and Add Another button.
  • Cancel button to close the modal.

Demo Top

  • Create Buttons component
  • Create Header component
  • Create HeaderContent Component

Navbar

  • Brand logo with the home route.
  • Page navigator.
  • Integrations dropdown.
  • login & signup buttons.

Personal Preferences

  • Create structure
  • Add all the select tag
  • Give labels to all of them
  • Make them responsive
  • Give Minimum 5 inputs for select components

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.