My #christmashackathon Project
Tags: christmashackathon, webdev, productivity, codenewbie
Published: 2020-12-28 05:00:38

Hey folks, It's been 6 days since Hashnode has announced its #christmashackathon. I was always excited to participate in Hackathon and to build something cool. So, I am presenting you The OPTWM - One Page Typography Website Maker. Carry on you'll find more about it. 

<hr>

## What is OPTWM and How does it work? 

So basically OPTWM means - One Page Typography Website Maker (You've read above I know sorry🙃).  
You have to just simply enter your content and adjust the colours and typography to your liking. And then you can download the personalized HTML file and upload it to your hosting. 

<hr>

### Who will benefit from this APP?  

- Beginners who have just started learning development and want a portfolio or for anything else. 
- Folks who have different kind of attraction towards **Typography**. 
- Developers who can make this tool more amazing by trying their skills on it. 

<hr>

### Screenshots
These are some screenshots of the APP. 
![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609125733853/YxV2wKURv.png)


### App Link and Source Code

APP Link ->   [OPTWM](https://optwm.herokuapp.com/)                                 
Source Code ->  [OPTWM - GitHub](https://github.com/rahxuls/OPTWM-One-Page-Typography-Website-Maker) 


<hr>

![undraw_youtube_tutorial_2gn3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609131711628/FqtSx8OWI.png)

## What I learned from this? 
- I got to work with some techniques that I thought were not important. This project helped me get to know that every single thing is important. 
- I learned time management. I wasted so much time in this. I would have done this in only 3 days but it took me 5 days due to wasting some time.
- I learned something about the backend and working of it. 
- I recognized my weakness in some topics that I should have cleared it earlier but I didn't so. 
- **Critical thinking** - Some developer/beginners don't know that critical thinking is important in this career if you've to move up. Critical thinking helps you to understand the problem so you can make numerous solution to one problem. 

<hr>

### How I made this (Personal Story)

![undraw_fatherhood_7i19.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609131755136/883v8eT8e.png)

When Hashnode announced this hackathon I was so much excited to participate in this because no requirements or anything else you just have to built and submit. So I was confused about what to build. I usually see projects on GitHub, Hashnode and Dev.to .

To get some idea about what to build. After seeing some posts on all the platforms I got an idea to build something where you can just write it and get it in format and then after thinking and thinking about this I thought of building a website cum tool where people can just visit and write their content and get it in HTML. 😳

At first, I didn't think it was possible for me(at that moment) to build something like that because it had been nearly 7 months I haven't touched the VS Code for making projects. So I thought to build it.  

**2 DAYS WENT DOING THIS**  <br />
(Fun Fact I didn't know that a bit of backend is required.) 
So I started coding and was prepared everything required for it.  After coding for 2 Days and One night continuous.  I was prepared for everything. All the buttons, elements, styling and everything was done. (twist) I had thought in the start that JavaScript is enough to get the HTML file to be downloaded. I started surfing on google and finding ways that I can make the download button working so HTML file can be downloaded. But after surfing for hours in the night I didn't find any way instead of just deleting everything and sleep. 

So, I simply switched of my laptop and was on a verge of sleeping but then suddenly on Google I continued my surfing then i found many articles and some stackoverflow question linked to PHP(that this can happen with the help of PHP). I just tweeted this -> 
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">NEED HELP URGENT! <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <br><br>Anyone who knows PHP well DM me ASAP. <br><br>Thank You. <a href="https://twitter.com/hashtag/webdev?src=hash&amp;ref_src=twsrc%5Etfw">#webdev</a> <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; RAHUL (@rahxul) <a href="https://twitter.com/rahxul/status/1342448432930115584?ref_src=twsrc%5Etfw">December 25, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

After some minutes I got a reply on my tweet **what's your query** from [Anmol](https://twitter.com/suri_anmol). Without wasting any time I simply texted him with my query and he helped me as a god by sending some links and explaining me the full procedure. This procedure was a bit tough so I asked him if he can contribute to my code. He told me **It's your hackathon**. I was like yes it's mine so I have to build without any contributions. I don't know backend I just tried to see and read carefully every link he had sent me I understood the procedure and I started once again.

I was successful after freaking 32nd tries seriously.  
![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609066636322/nkz6dlsF0.png)

I was happy and was feeling good that without any backend knowledge I did. It was completed yesterday but some editing was still required and hosting is the main thing because I had no idea. @[Chris Bongers](@dailydevtips) has helped in explaining a bit about PHP and telling me about hosting backend. He also told me an alternate way to do that but I had started with PHP so I continued with it. 

This was a short and simple story🙃. 

<hr>

💻Thank You For Reading | Happy Coding ⚡