This website is intended to introduce my tech and gaming Discord server, which is primarily focused on programming. The site features many unique ideas and concepts to stand out from the crowd.
› This project contains my complete design with all the functionalities of the Bl4cklist website, which I created for my own Discord server. I hope that maybe some people can learn something from it when they look at the project.
💝 › The project was developed by Yannic Drews and is actively maintained - user requests are welcome and are actively discussed together with a small Discord server team. :)
› Bl4cklist Website offers some fundamental features that help you better understand or apply basic concepts in certain areas.
🔎 › This project uses a handful third-party libraries: Tailwind, Next.js, and JEST.
It supports following features:
- 🖼️ Creative & beautiful design: We have put a lot of thought into the design of the website and wanted it to be something unique - we have put a lot of love and attention to detail into it.
- 💚 100% Unit-Test Coverage: Software testing is an important point when programming professionally for clients - we have tested all our TypeScript code, and you may be able to learn something from it.
- ⚙️ Server-Side-Rendering: The landing page inside this little dashboard is using Angular's SSR to be optimized for Google and as fast as possible.
- 💯 API-Calls with SSR Support: We implemented a possible way to get realtime statistics & objects while still supporting SSR.
- ☁️ Cloudflare Turnstile Integration: To avoid bots spamming our contact form, we're using Cloudflare's Captcha Tool "Turnstile".
- 🎉 Easter-Egg System: We implemented 10+ unique Easter Eggs that you can find on our website. Have fun finding them! ;)
- 🚩 Language Switcher: Our website automatically detects the language of your browser and displays English/German accordingly, alternatively the user can switch via button click.
- 📱 Responsive for all Devices: We have put a special focus on ensuring that the website is beautifully and user-friendly displayed on as many devices as possible.
- 🎈 Catchy Animations: As soon as an object comes into the user's field of view, a beautiful animation is played if applicable.
- 💸 Google Ads Integration: With a simple solution we integrated some google ad banners on our page.
⚙️ › To run the test coverage and see the results, just open a terminal in the project root folder and run the command jest.
› You can open this website here: https://bl4cklist.de
- Run
ng build. - Run
cp -r public .next/standalone/ && cp -r -force .next/static .next/standalone/.next/ - Create a tar file for linux-support (windows creates .link files otherwise):
tar -czhf release.tar.gz -C .next/standalone . - Upload the
release.tar.gzfile to the server and unpack it withtar -xzf release.tar.gz && rm release.tar.gz. - Now start the server with
node server.js.
- Source Code: MIT License (see LICENSE file for details)
- Branding / Images: All files inside
/public/images/brandare copyrighted and may only be used with explicit permission from the author.