[{"_1":2,"_468":-5,"_469":-5},"loaderData",{"_3":4},"routes/project",{"_5":6,"_7":8,"_150":151,"_212":213,"_467":-5},"isLoading",false,"project",{"_9":10,"_11":12,"_13":12,"_14":15,"_16":17,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":28,"_30":31,"_32":33,"_34":35,"_36":37,"_38":39,"_43":44,"_45":-5,"_46":47,"_48":6,"_49":44,"_50":6,"_51":52,"_58":59,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":-5,"_74":75,"_76":6,"_77":78,"_79":80,"_83":84,"_85":86,"_87":-5,"_88":89,"_90":91,"_102":103,"_109":110,"_113":114,"_125":126,"_139":140,"_145":146},"id",27,"created_at","2025-03-29T08:41:21.506114+00:00","updated_at","user_id","346ac703-6757-4f33-9822-62d4dda575d7","employer_id",15,"start_date","2022-06-19T00:00:00.000Z","end_date","gh_url","https://github.com/timiodulate/ms-clock-clone","gh_visibility",true,"demo_url","https://ms-clock-clone.netlify.app","tech_stack",[29,10],24,"technical_skills",[],"soft_skills",[],"title","MS Clock Clone","description","Built a Microsoft Windows Clock replica using Next.js, TypeScript, Redux, and SCSS.","source_categories",[40,41,42],"Self-Initiated: Practice Project","Personal","Unpaid","project_owner_id",4,"associated_experience","my_description","","is_ongoing","software_owner_id","needs_attention","services_categories",[53,54,55,56,57],"Software Development","UI Design","UX design","Full-Stack Development","Web Application","product_built_categories",[60,57,61],"Application Software","Utility","banner","microsoft-clock-clone/pomodoro-project.png","deleted_at","problem","solution","key_decisions","outcome","brief_summary","your_role","project_type","personal","team_size","metrics",[],"is_draft","description_bullets",[37],"software_owner_details",{"_9":44,"_81":82},"name","timiodulate","employer_details",{"_9":17,"_81":82},"project_owner_details",{"_9":44,"_81":82},"experiences","associated_experience_details",{},"source_categories_details",[92,96,99],{"_9":93,"_81":40,"_94":95},20,"category","Project Source",{"_9":97,"_81":41,"_94":98},100,"Project Class",{"_9":100,"_81":42,"_94":101},7,"Payment Type","product_built_categories_details",[104,107],{"_9":105,"_81":60,"_94":106},152,"Product Category",{"_9":17,"_81":57,"_94":108},"Software Category","product_categories_details",[111,112],{"_9":105,"_81":60,"_94":106},{"_9":17,"_81":57,"_94":108},"services_categories_details",[115,118,120,122],{"_9":116,"_81":54,"_94":117},12,"Project Type",{"_9":119,"_81":55,"_94":117},13,{"_9":121,"_81":53,"_94":117},142,{"_9":123,"_81":56,"_94":124},150,"Software Development Type","tech_stack_details",[127,134],{"_9":29,"_11":128,"_13":128,"_14":15,"_81":129,"_64":-5,"_130":131,"_132":133},"2025-03-25T12:52:02.728369+00:00","Typescript","aliases",[],"actions",[],{"_9":10,"_11":135,"_13":135,"_14":15,"_81":136,"_64":-5,"_130":137,"_132":138},"2025-03-29T08:32:33.995712+00:00","Scss",[],[],"skills_details",[141],{"_81":142,"_94":143},"Frontend / Frontend Development",[144],"Technical Skills","skills_details_display",{"_144":147,"_148":149},[],"Soft Skills",[],"prevProject",{"_9":152,"_11":153,"_13":153,"_14":15,"_16":17,"_18":154,"_20":-5,"_21":155,"_23":24,"_25":156,"_27":157,"_30":160,"_32":161,"_34":162,"_36":163,"_38":164,"_43":44,"_45":-5,"_46":165,"_48":6,"_49":44,"_50":6,"_51":166,"_58":167,"_62":170,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":-5,"_74":171,"_76":6,"_77":172,"_79":173,"_83":174,"_85":175,"_87":-5,"_88":176,"_90":177,"_102":181,"_109":187,"_113":190,"_125":195,"_139":206,"_145":209},18,"2025-03-08T20:59:57.459681+00:00","2022-06-27","https://github.com/timiodulate/my-portfolio","https://thecopydev.netlify.app/",[158,10,159],8,11,[],[],"TheCopyDev - timiodulate Portfolio Website","

Brief description: Built a portfolio website (https://thecopydev.netlify.app/) to showcase web and mobile app development services of a product designer.

Core Technologies: [Core Technologies]

Outcome / impact:

enhanced professional visibility,
attracted job opportunities, and
demonstrated design expertise to a broader audience.
src: \"https://drive.google.com/uc?export=view&id=1SBLXgSWqSC1cEN5f5Cdj4-ljdTdkfxhc\",

",[40,41,42],"Type of Software The Copy Dev is classified as a portfolio website or personal branding platform. One-line Summary A platform showcasing web and mobile app development services focused on user engagement and strategic design. Project Summary The Copy Dev is a portfolio website created to highlight the services and projects of Timi Odulate, a software engineer specializing in web and mobile app development. The site emphasizes engaging design and strategic functionality tailored to meet client needs, facilitating potential collaborations and business inquiries. Project Overview The Copy Dev serves as an online presence for a software engineer providing a range of development services, including websites, web applications, mobile applications, and UX/UI design. The website is designed to attract potential clients by showcasing previous work, promoting the engineer's expertise, and enabling easy contact for business inquiries. Focused on user experience, the platform combines aesthetically pleasing design with effective functionality to enhance visitor interaction.",[54,55,53,56],[168,169],"Website","Portfolio","timiodulate-portfolio/banner.jpeg",[],[163],{"_9":44,"_81":82},{"_9":17,"_81":82},{"_9":44,"_81":82},{},[178,179,180],{"_9":93,"_81":40,"_94":95},{"_9":97,"_81":41,"_94":98},{"_9":100,"_81":42,"_94":101},[182,184],{"_9":183,"_81":168,"_94":106},151,{"_9":185,"_81":169,"_94":186},213,"Industry Focus",[188,189],{"_9":183,"_81":168,"_94":106},{"_9":185,"_81":169,"_94":186},[191,192,193,194],{"_9":116,"_81":54,"_94":117},{"_9":119,"_81":55,"_94":117},{"_9":121,"_81":53,"_94":117},{"_9":123,"_81":56,"_94":124},[196,198,201],{"_132":197},[],{"_9":10,"_11":135,"_13":135,"_14":15,"_81":136,"_64":-5,"_130":199,"_132":200},[],[],{"_9":159,"_11":202,"_13":202,"_14":15,"_81":203,"_64":-5,"_130":204,"_132":205},"2025-03-25T12:43:44.825711+00:00","React Bootstrap",[],[],[207],{"_81":142,"_94":208},[144],{"_144":210,"_148":211},[],[],"nextProject",{"_9":214,"_11":215,"_13":215,"_14":15,"_16":216,"_18":217,"_20":-5,"_21":218,"_23":24,"_25":219,"_27":220,"_30":239,"_32":240,"_34":241,"_36":242,"_38":243,"_43":158,"_45":29,"_46":47,"_48":6,"_49":221,"_50":6,"_51":250,"_58":251,"_62":253,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":254,"_70":-5,"_71":72,"_73":-5,"_74":255,"_76":6,"_77":256,"_79":257,"_83":259,"_85":261,"_87":263,"_88":296,"_90":301,"_102":316,"_109":319,"_113":322,"_125":325,"_139":461,"_145":464},16,"2025-02-27T15:41:24.869301+00:00",19,"2021-04-29T00:00:00.000Z","https://github.com/timiodulate/3hfoundation","https://3hfoundation.netlify.app",[158,221,159,214,222,152,223,216,93,224,29,225,226,227,228,119,229,230,231,232,233,234,235,236,237,238],10,33,17,23,195,178,28,98,32,25,203,204,201,60,106,205,125,206,[],[],"HeadHeartHand Foundation Website","This is a description written by hand",[244,245,246,247,248,249],"Client-Requested","Client-work","Employed","Freelance","Paid","One-Time Work",[53,56],[168,252],"Nonprofit & Social Impact","3hfoundation/banner.jpeg","A functional and responsive website of HeadHeartHand Foundation which is a non-profit organization located in Surrey, British Columbia, Canada and open to all members of the public.",[],[242],{"_9":221,"_81":258},"HeadHeartHand",{"_9":216,"_81":260},"ExitoLab",{"_9":158,"_81":262},"3h Foundation",{"_9":29,"_264":265,"_266":47,"_267":47,"_34":268,"_269":270,"_271":6,"_14":15,"_20":272,"_11":273,"_64":-5,"_18":274,"_13":273,"_36":275,"_16":276,"_277":278,"_279":280,"_282":283,"_284":285,"_286":287,"_288":289},"city","Surrey","type","state","Freelance Frontend Web Developer","country","Canada","current","2021-11-01","2025-04-15T16:01:25.392796+00:00","2021-04-01","Translated Figma designs into a production-grade React 17 single-page application with pixel-accurate implementation and responsive layouts.\nBuilt modular, reusable UI components leveraging React, Bootstrap, and Styled Components to ensure maintainability.\nIntegrated REST APIs provided by the backend team using Axios to handle asynchronous data flows.\nDeveloped and validated complex user forms using react-hook-form.\nConfigured environment variables via dotenv, managed build configuration via Webpack, and deployed on Vercel utilizing GitHub-linked CI/CD.\nWrote and executed local tests prior to staging release using Jest and React Testing Library.",26,"location_type","remote","employment_type",[281,247],"Contract","your_description","HeadHeartHand Foundation (operating digitally as 3hFoundation) is a non-profit charitable organization based in Surrey, British Columbia, Canada, dedicated to community empowerment and holistic development through its core \"Head, Heart, and Hand\" philosophy. Under this framework, the foundation advances intellectual capacity (\"Head\"), instills moral and civic values (\"Heart\"), and imparts practical skills required for sustainable community growth (\"Hand\"). To carry out its mission, 3hFoundation operates local poverty relief programs—including food bank services and basic necessity support for vulnerable families—alongside a dedicated BIPOC scholarship fund for vocational education, youth empowerment seminars, and international development missions focused on digital literacy and entrepreneurship.\n\nA developer with the brand name, ExitoLab reached out to me to work on the Frontend of the Organization website. I was given the design on Figma and I translated the design to code.\n\nI took the job as a freelancer.\nThis is the first ever gig I got, it was fully remote.\n\nI mainly work on the Frontend.","experience_skills",[],"associated_projects",[214],"key_responsibilities",[290,291,292,293,294,295],"Translated Figma designs into a production-grade React 17 single-page application with pixel-accurate implementation and responsive layouts.","Built modular, reusable UI components leveraging React, Bootstrap, and Styled Components to ensure maintainability.","Integrated REST APIs provided by the backend team using Axios to handle asynchronous data flows.","Developed and validated complex user forms using react-hook-form.","Configured environment variables via dotenv, managed build configuration via Webpack, and deployed on Vercel utilizing GitHub-linked CI/CD.","Wrote and executed local tests prior to staging release using Jest and React Testing Library.",{"_9":29,"_264":265,"_266":47,"_267":47,"_34":268,"_269":270,"_271":6,"_14":15,"_20":272,"_11":273,"_64":-5,"_18":274,"_13":273,"_36":275,"_16":276,"_277":278,"_279":297,"_282":283,"_284":298,"_286":299,"_288":300},[281,247],[],[214],[290,291,292,293,294,295],[302,304,306,309,312,314],{"_9":303,"_81":244,"_94":95},1,{"_9":305,"_81":245,"_94":98},111,{"_9":307,"_81":246,"_94":308},700,"Employment Status",{"_9":310,"_81":247,"_94":311},9,"Work Mode",{"_9":313,"_81":248,"_94":101},6,{"_9":119,"_81":249,"_94":315},"Client Relationship",[317,318],{"_9":183,"_81":168,"_94":106},{"_9":230,"_81":252,"_94":186},[320,321],{"_9":183,"_81":168,"_94":106},{"_9":230,"_81":252,"_94":186},[323,324],{"_9":121,"_81":53,"_94":117},{"_9":123,"_81":56,"_94":124},[326,328,333,336,342,347,349,354,359,364,369,372,380,387,393,395,401,407,413,419,425,431,437,443,449,455],{"_132":327},[],{"_9":221,"_11":329,"_13":329,"_14":15,"_81":330,"_64":-5,"_130":331,"_132":332},"2025-03-25T12:43:21.576637+00:00","React Router",[],[],{"_9":159,"_11":202,"_13":202,"_14":15,"_81":203,"_64":-5,"_130":334,"_132":335},[],[],{"_9":214,"_11":337,"_13":337,"_14":15,"_81":338,"_64":-5,"_130":339,"_132":341},"2025-03-25T12:48:39.471529+00:00","Styled Component",[340],"Styled Components",[],{"_9":222,"_11":343,"_13":343,"_14":15,"_81":344,"_64":-5,"_130":345,"_132":346},"2025-04-01T17:58:47.37299+00:00","SASS",[],[],{"_132":348},[],{"_9":223,"_11":350,"_13":350,"_14":15,"_81":351,"_64":-5,"_130":352,"_132":353},"2025-03-25T12:49:53.974281+00:00","Babel",[],[],{"_9":216,"_11":355,"_13":355,"_14":15,"_81":356,"_64":-5,"_130":357,"_132":358},"2025-03-25T12:50:34.128072+00:00","Jest",[],[],{"_9":93,"_11":360,"_13":360,"_14":15,"_81":361,"_64":-5,"_130":362,"_132":363},"2025-03-25T12:51:12.07571+00:00","React Testing Library",[],[],{"_9":224,"_11":365,"_13":365,"_14":15,"_81":366,"_64":-5,"_130":367,"_132":368},"2025-03-25T12:51:37.826535+00:00","ESLint",[],[],{"_9":29,"_11":128,"_13":128,"_14":15,"_81":129,"_64":-5,"_130":370,"_132":371},[],[],{"_9":225,"_11":373,"_13":373,"_14":374,"_81":375,"_64":-5,"_130":376,"_132":378},"2026-08-05T15:31:51.802285+00:00","61c9f389-b768-46a1-96a9-b5267eeda5c2","React",[377],"React.js",[379],"Frontend UI library for building component-based views",{"_9":226,"_11":381,"_13":381,"_14":382,"_81":383,"_64":-5,"_130":384,"_132":385},"2026-08-01T12:13:30.544448+00:00","877fc4a9-af08-4e67-85bc-b3cab0c2d698","Webpack",[],[386],"Module bundler for compiling frontend assets and running the development server",{"_9":227,"_11":388,"_13":388,"_14":15,"_81":389,"_64":-5,"_130":390,"_132":391},"2025-03-29T08:37:28.15755+00:00","Bootstrap",[],[392],"CSS framework providing pre-styled layout and UI components",{"_132":394},[],{"_9":119,"_11":396,"_13":396,"_14":15,"_81":397,"_64":-5,"_130":398,"_132":399},"2025-03-25T12:44:20.273205+00:00","React Hook Form",[],[400],"Library for managing form state and validation with React hooks",{"_9":229,"_11":402,"_13":402,"_14":15,"_81":403,"_64":-5,"_130":404,"_132":405},"2025-04-01T17:57:51.305309+00:00","React Helmet",[],[406],"Library for managing document head metadata dynamically in React",{"_9":230,"_11":408,"_13":408,"_14":15,"_81":409,"_64":-5,"_130":410,"_132":411},"2025-03-25T12:55:49.804275+00:00","Axios",[],[412],"HTTP client for making API requests to the backend server",{"_9":231,"_11":414,"_13":414,"_14":15,"_81":415,"_64":-5,"_130":416,"_132":417},"2026-08-05T15:33:45.013602+00:00","React GA",[],[418],"Google Analytics integration library for tracking page views and user events",{"_9":232,"_11":420,"_13":420,"_14":15,"_81":421,"_64":-5,"_130":422,"_132":423},"2026-08-05T15:33:46.726176+00:00","React Share",[],[424],"Social media sharing buttons and share count components",{"_9":233,"_11":426,"_13":426,"_14":374,"_81":427,"_64":-5,"_130":428,"_132":429},"2026-08-05T15:32:00.679407+00:00","React Toastify",[],[430],"Library for rendering notification toast messages in the UI",{"_9":234,"_11":432,"_13":432,"_14":15,"_81":433,"_64":-5,"_130":434,"_132":435},"2026-04-17T08:18:49.561912+00:00","Python",[],[436],"Programming language for running the backend API service",{"_9":235,"_11":438,"_13":438,"_14":15,"_81":439,"_64":-5,"_130":440,"_132":441},"2026-05-16T03:48:59.386419+00:00","Django",[],[442],"Web framework for building the backend API and server-side logic",{"_9":236,"_11":444,"_13":444,"_14":15,"_81":445,"_64":-5,"_130":446,"_132":447},"2026-08-05T15:33:50.714501+00:00","Django REST Framework",[],[448],"Toolkit for building Web APIs on top of Django",{"_9":237,"_11":450,"_13":450,"_14":15,"_81":451,"_64":-5,"_130":452,"_132":453},"2026-05-18T15:15:59.379418+00:00","Docker",[],[454],"Containerization tool for packaging and running the backend service",{"_9":238,"_11":456,"_13":456,"_14":15,"_81":457,"_64":-5,"_130":458,"_132":459},"2026-08-05T15:33:53.205291+00:00","Jinja2",[],[460],"Templating engine for rendering HTML templates in Django",[462],{"_81":142,"_94":463},[144],{"_144":465,"_148":466},[],[],"error","actionData","errors"]

MS Clock Clone

About This Project

Tech Stack

Quick Links

More Projects