我如何在短短 3 个月的空闲时间里创建了 devchallenges.io

关于我

大家好，我是Thu。我来自越南，五年前（独自一人……）搬到了芬兰。我来芬兰是为了学习，自学了一年半后，就找到了第一份游戏程序员的工作。后来，我在芬兰最大的公司之一Telia找到了一份网页开发的工作。我在团队中担任开发人员/Scrum Master。

现在我感觉每天上班都有点无聊了，所以我决定做点不一样的事情。在看到大家在 dev.to 上分享他们的故事后，我开始创建 devchallenges.io，以下是我实现它的方法。

路线图

第一周

我从不同的来源收集设计网站的灵感。我大部分时间都花在了Dribbble上，挑选了几种设计，并使用了其中的颜色。

几天后，我大概知道我想做什么了。然后我用Figma——一个免费的设计工具——在一个周末内快速绘制了设计图。

第 2 周 - 第 3 周

我在这两周里努力将我的想法转化为代码，并完成了 75% 的应用程序 - 包括前端和后端

第4周 - 第8周

下一步是设计挑战。

这是最具挑战性的部分，因为我必须想出各种想法和设计。不过，通过阅读不同的文章和 Dribbble，我最终完成了 16 个设计 :)

第 9 周 - 第 12 周

最后一步是把所有东西整合起来。有时候我甚至想放弃，因为我觉得这永远也做不成了。

很多地方我都得重做，因为拼凑起来感觉不太合理。不过好在每次我跟朋友们分享我的作品时，他们都觉得设计很棒，这给了我很大的动力。

我使用

我使用了这里所有免费的东西:)

设计：

• Figma

前端：

• React - 我使用Create React App开始
• 钩子- 用于useState本地状态和useContext全局状态
• CSS 模块、CSS 变量- 保持 CSS 有序
• 其他：Typescript、react-hook-form、yup、..

后端：

• Firebase - 我使用它来托管、验证、数据库等它提供的一切。
• Express - 创建 RESTful API

自动化：

• 我使用Google 云来持续构建和部署。

我如何让它看起来更专业

当我设计网站时，我希望它看起来美观。这没什么秘诀，只要我保持间距和颜色一致，最终就能呈现出不错的效果。

通过使用 CSS 和 Sass 变量，我可以轻松地做到这一点。

因为我把它弄得干净整洁，很多朋友一直问我这是否免费。是的，免费，我什么都没卖 :)))

下一步

我会继续努力，让 devchallenges.io 变得更好。我已经看到了第一批用户，希望未来会有更多用户。

我计划创建一个 YouTube 频道，在那里分享我的故事和我的经历。

结束

感谢你的阅读，希望这篇文章能帮助你的个人项目，或者激励大家效仿我的做法。如果你想提升你的作品集，可以看看https://devchallenges.io/。

请随意给我留言。