The latest articles on DEV Community by Mhmd Ali Hsen (@mhmdalihsen). https://dev.to/mhmdalihsen https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F845151%2F2c5afa4d-d600-4170-87f6-a34f69bbdd14.jpg https://dev.to/mhmdalihsen en Mhmd Ali Hsen Thu, 19 May 2022 08:14:24 +0000 https://dev.to/mhmdalihsen/my-first-real-project-xerolinux-4l67 https://dev.to/mhmdalihsen/my-first-real-project-xerolinux-4l67 <p>Hello, I'm Mhmd Ali, a Front-End Web developer. in this post I'll share my process of designing and building my first real project <a href="https://xerolinux.xyz">XeroLinux</a>. </p> <h2> How it started? </h2> <p>First of all, I watched a <a href="https://www.youtube.com/watch?v=rqCTzdLNeXY">video</a> on <a href="https://www.youtube.com/c/DistroTube">DistroTube YouTube channel</a> showing the distro, I really liked the distro and how it looks so nice, then I head to the official website to download it, and I realized that the website don't have the same feelings of the distro and I thought that I can do better, so I joined <a href="https://t.me/xerolinux">XeroLinux Telegram channel</a> and I sent a message with mentioning DarkXero (the Creator and maintainer of XeroLinux) if he is planning to redesinging XeroLinux website and the answer was YES!</p> <h3> the original design (Before): </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--PPUYUlQU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/SLfAV4v.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PPUYUlQU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/SLfAV4v.png" alt="XeroLinux Original Design" width="880" height="1457"></a></p> <h2> My redesign Process! </h2> <p>At this point I made a quick mvp with <a href="https://figma.com">Figma</a> showing my idea to DarkXero, of course no thing is perfect from the first time so I kept tweaking the design for about two weeks until we agreed on this desing below.</p> <h3> the Re-Design (After): </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--AJ-hLVCD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/0eGjmUl.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--AJ-hLVCD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://imgur.com/0eGjmUl.png" alt="XeroLinux Re-Design" width="582" height="917"></a></p> <p>The idea was to make the website looks and feels same as the Distro specifically the XeroCerry rice.</p> <h2> Building the website </h2> <p>Now it's time to build the website, I created the website with ReactJS since it is the language that I'm comfortable, It tooked around 2 weeks to finish it. but the problem was that DarkXero wanted an easy way to update the Changelog, Announcements, Videos and the FAQs without changing the source code, so I made everything he need to update in a json file, except for the Pop Ups because they do not have a single layout or a fixed content, I kept thinking for a solution until I remembered <a href="https://github.com/mhmdali102/NoteDown">NoteDown</a>, this is a tool/notes web app I've created while I was learning JavaScript to take notes with Markdown syntax with many useful features. Since he knows Markdown I configured the tool to preview Markdown in the same styles for XeroLinux website, <a href="https://xero-md2html.netlify.app/">click here to try the configured tool</a>.</p> <h2> My experience </h2> <p>It was a good experience, I'm grateful that my first project was something that I love,<br> and I enjoyed working on it, and DarkXero is an awesome person, I'm happy that I met him.</p> <p>Thank you for reading, what do you think about it? Any advice would be much appreciate it...</p> react webdev design linux