Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lawuysal/music-blog-frontend

A blog website project for my internship at Entegre Yazılım
https://github.com/lawuysal/music-blog-frontend

markdown react react-router shadcn-ui tailwindcss tanstack-query typescript

Last synced: 7 days ago
JSON representation

A blog website project for my internship at Entegre Yazılım

Host: GitHub
URL: https://github.com/lawuysal/music-blog-frontend
Owner: lawuysal
Created: 2024-07-01T06:47:15.000Z (5 months ago)
Default Branch: main
Last Pushed: 2024-10-31T23:46:17.000Z (17 days ago)
Last Synced: 2024-11-01T00:25:29.726Z (17 days ago)
Topics: markdown, react, react-router, shadcn-ui, tailwindcss, tanstack-query, typescript
Language: TypeScript
Homepage: https://rays-blog-gold.vercel.app/
Size: 893 KB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        



 

Ray Maschine's Music Blog

Build from a minimal blog idea. 

Server Codes Here



  Table of Contents

  


    

      About The Project

      

        Built With

      

    

    

      Screenshots

      

  



## About The Project

   

[Deployed on Vercel, Go to Ray's Blog](https://rays-blog-gold.vercel.app/)

I created this website within my internship just to write down my thoughts about music and other concepts.

Eventually I improved myself both on frontend and backend.
    

I used a ASP.NET backend with MSSQL. Since I learning the ASP.NET, this project played a great role to improve my common skills like database migrations, DI, identity and authentication. 


With this project, I also improved my react skills like routing, querying and mutating remote data, styling and user experience. Also Shadcn really helped me to achive faster development both on components and dark mode :). 


I created a fully responsive design with the help of Tailwind. Yes, it's possible with vanilla CSS but it makes managing the files and class names a hard thing.


### Built With

* [![Typescript][Typescript]][Typescript-url]

* [![React][React.js]][React-url]

* [![React Router][ReactRouter]][ReactRouter-url]

* [![React Queryff][ReactQuery]][ReactQuery-url]

* [![Shadcn][Shadcn]][Shadcn-url]

* [![Tailwind][Tailwind]][Tailwind-url]

* [![.NET][.NET]][.NET-url]

* [![MSSQL][MSSQL]][MSSQL-url]

(back to top)


## Screenshots

### Main Page with Light Mode

![Main Page with Light Mode](https://raw.githubusercontent.com/lawuysal/images/main/rays-blog-screenshots/main_page_light.png)

---

### Article Gallery with querying and sorting features    

![Article Gallery with querying and sorting features](https://raw.githubusercontent.com/lawuysal/images/main/rays-blog-screenshots/article_gallery.png)

---

### Article Page 1

![Article Page 1](https://raw.githubusercontent.com/lawuysal/images/main/rays-blog-screenshots/article_page.png)

---

### Article Page 2 with markdown

![Article Page 1](https://raw.githubusercontent.com/lawuysal/images/main/rays-blog-screenshots/article_page_2.png)

---

### Fully working category and tag querying

![Fully working category and tag querying](https://raw.githubusercontent.com/lawuysal/images/main/rays-blog-screenshots/article_footer.png)

---

### Article Creation page

![Article Creation page](https://raw.githubusercontent.com/lawuysal/images/main/rays-blog-screenshots/article_creation.png)

---

### Article Creation page with DIY markdown editor and preview

![Article Creation page with DIY markdown editor and preview](https://raw.githubusercontent.com/lawuysal/images/main/rays-blog-screenshots/article_creation_2.png)

---

### Article Creation page with local draft and clean functions

![Article Creation page with local draft and clean functions](https://raw.githubusercontent.com/lawuysal/images/main/rays-blog-screenshots/article_creation_3.png)

---

### Image Gallery to upload and use images in the articles

![Image Gallery to upload and use images in the articles](https://raw.githubusercontent.com/lawuysal/images/main/rays-blog-screenshots/image_gallery.png)

---

### Responsive design examples



 

 

 

 



---

[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB

[React-url]: https://reactjs.org/

[ReactRouter]: https://img.shields.io/badge/-React%20Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white

[ReactRouter-url]: https://reactrouter.com/en/main

[ReactQuery]: https://img.shields.io/badge/-React%20Query-FF4154?style=for-the-badge&logo=react%20query&logoColor=white

[ReactQuery-url]: https://tanstack.com/query/latest

[Shadcn]: https://img.shields.io/badge/shadcn/ui-000000?style=for-the-badge&logo=shadcn/ui&logoColor=white

[Shadcn-url]: https://ui.shadcn.com/

[MSSQL]: https://img.shields.io/badge/Microsoft%20SQL%20Server-CC2927?style=for-the-badge&logo=microsoft%20sql%20server&logoColor=white

[MSSQL-url]: https://www.microsoft.com/tr-tr/sql-server

[.NET]: https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white

[.NET-url]: https://dotnet.microsoft.com/en-us/apps/aspnet

[Tailwind]: https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white

[Tailwind-url]: https://tailwindcss.com/

[Typescript]: https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white

[Typescript-url]: https://www.typescriptlang.org/