https://github.com/codestackr/coducks
https://github.com/codestackr/coducks
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/codestackr/coducks
- Owner: codeSTACKr
- Created: 2023-08-27T22:01:29.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-27T22:01:34.000Z (over 2 years ago)
- Last Synced: 2025-06-08T23:04:26.852Z (10 months ago)
- Language: TypeScript
- Size: 11.9 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# coducks
Demo app for "Codux Live: Building an eComm product page ft. RadixUI & TailwindCSS"
In this project we build the UI for an ecommerce product page, using TailwindCSS
for styling and RadixUI for building the more complex UI elements. Throughout,
we'll be using Codux as a platform for visually iterating on the implementation.
## Outline
The branches & commits in this repository correspond to "checkpoints" throughout the webinar. As you
follow along, if you ever get stuck or out of sync with the tutorial you can check out the
corresponding branch or commit to "catch up".
- Intro: project scope & design brief
[checkpoint: branch `0-start`]
- 1: TailwindCSS atomic styling
- 1.1 Footer styles
- 1.2 Header styles
- 1.3 Layout
- 1.4 Product info
[checkpoint: branch `1-tailwind`]
- 2: RadixUI component primitives
- 2.1 Product info accordion
- 2.2 Product size toggle
- 2.3 Image gallery
- 2.4 Navigation menu
[checkpoint: branch `2-radix`]
- 3: (optional) Responsive design
- 3.1 Mobile layout
[checkpoint: branch `3-bonus`]
## Installation
Prerequisites:
- Install Node & npm
- Sign up for a free Codux account
Project set up:
- Clone the project repo, and checkout the `0-start` branch.
- In Codux, open the repository as a Codux project
- Run the "Install" script in Codux (or `npm i` on the command line) to install the project dependencies
- Follow along with the webinar! Use the branches if needed to catch up or "reset" to a checkpoint.