Dynapic is a tool for generating images with dynamic content. You can use it to generate headers or profile pictures for your Social Media profiles, Open Graph images for each one of your blog posts, or any other picture with dybamic data to embed wherever you want.
Tech Stack
Infrastructure
- Railway: infrastructure-as-a-service that allows to deploy and provision databases for different environments.
Main Technologies
- TypeScript: Type-safety for JavaScript
- React.js: UI library
- Remix: Full-stack React Framework
Supporting Technologies
- Mantine: Component library for React
- Framer Motion: Animation library for React
Development Guidelines
VSCode Remote Containers is used to create an isolated development environment and avoid conflicts with other locally installed tools.
System Requirements
Cloning the project
Using the gh
CLI:
gh repo clone elkevinwolf/dynapic
Using https
:
git clone https://github.com/elkevinwolf/dynapic.git
Using ssh
:
git clone [email protected]:elkevinwolf/dynapic.git
Opening the Development Container
Open the cloned project in VS Code. Once you open it, you will see a popup with the text Folder contains a Dev Container configuration file. Reopen folder to develop in a container.
, click the Re-open in Container
button and a new Docker container will be created and dependencies will be automatically installed for you.
Running the Development Server
With the project open in the Development Container, open the VSCode Integrated Terminal and enter npm run dev
. Navigate to http://localhost:3000 and you will see the application up and running.
Contributing
- Create a new branch off of
main
- Work on your changes, create as many commits as you need
- Open a Pull Request and set
main
as your base branch - Once it has been approved and tested, it will be squash-merged into
main
and your changes will be live ?
Code Conventions
Prettier with the @elkevinwolf/prettier-config
config and ESlint with the @elkevinwolf/eslint-config-react
are used to ensure good and concise coding standards.
Commit conventions
All commits in the main
branch should follow the Conventional Commits specification.
Commits in other branches or Pull Requests doesn’t need to follow the convention, since they will eventually be squash-merged into main
using the above convention.
Continuous Integration / Continuous Deployment
Whenever a push happens, a GitHub Action will validate the code, by building, linting, and testing the application.
The main
branch points to the production environment in Railway, while Pull Requests will provision temporary environments for testing.