This repository is for a web magazine project utilizing a mono-repo setup that includes both the backend and frontend codebases. The backend is powered by Strapi, a headless CMS, allowing for easy content management and API generation. The frontend is developed with Gatsby, a React-based static site generator, and styled with Tailwind CSS for responsive and customizable design.
- Strapi: Open-source headless CMS for managing and delivering your content.
- Gatsby: React-based framework for creating fast and secure websites.
- Tailwind CSS: Utility-first CSS framework for rapid UI development.
- GraphQL: A query language for your API.
![Screenshot 2024-02-05 at 17 18 30](https://private-user-images.githubusercontent.com/41821819/302319244-aafce86b-0f56-46af-bb8e-22e904d3e724.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIwODE2NTgsIm5iZiI6MTcyMjA4MTM1OCwicGF0aCI6Ii80MTgyMTgxOS8zMDIzMTkyNDQtYWFmY2U4NmItMGY1Ni00NmFmLWJiOGUtMjJlOTA0ZDNlNzI0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI3VDExNTU1OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY2YTVmNzNhMTM5NGNkZmE1YjE1ZWQ5MjkzOTQ2NzJlMTMyYmY3YTg2YmM4NzRkMTEyMWU0ODcwYmJhZWM0MTgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.PIof7sKSibFEJ2_IEk8-ZapoMib3u3NTK6er8klsoVg)
The project is divided into two main directories:
/backend
: Contains the Strapi application with the content models, plugins, and configurations./frontend
: Houses the Gatsby application, including pages, components, and styles.
Included in the frontend is an example component IssuePage
, which demonstrates how to fetch and display an issue and its articles from Strapi using GraphQL and render it with Gatsby and Tailwind CSS for styling.
- Node.js (LTS version)
- Yarn or npm
- Gatsby CLI (optional)
- Strapi CLI (optional)
-
Clone the repository
git clone <repository-url>
-
Install Backend Dependencies Navigate to the backend directory and install dependencies.
cd backend yarn install # or npm install
-
Install Frontend Dependencies Navigate to the frontend directory and install dependencies.
cd frontend yarn install # or npm install
In the backend directory, start the Strapi server.
yarn develop # or npm run develop
In a new terminal window, navigate to the frontend directory and start the Gatsby server.
gatsby develop
After starting the backend, access the Strapi admin panel at http:https://localhost:1337/admin.
You can deploy in any NodeJs Server by building both frontend and backend folders.
![Screenshot 2024-02-05 at 17 19 30](https://private-user-images.githubusercontent.com/41821819/302319548-e524590d-d4f2-4aba-8de6-738e32c3df02.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjIwODE2NTgsIm5iZiI6MTcyMjA4MTM1OCwicGF0aCI6Ii80MTgyMTgxOS8zMDIzMTk1NDgtZTUyNDU5MGQtZDRmMi00YWJhLThkZTYtNzM4ZTMyYzNkZjAyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI3VDExNTU1OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY1Y2M4MmQxNWQ5N2I0Y2MxY2JiNDY3MWRiMDMwZTI3MDA1NjM4NmVhNDFkNjMzM2UzZTdmMzllMWM3MTc5MmMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.cim5gc48V1UOR_MEuwygJ5ZSogOEpbOKdz4LTbHis9I)