{"id":14990603,"url":"https://github.com/fajoaq/e-commerce-solidjs","last_synced_at":"2025-04-12T02:37:35.899Z","repository":{"id":102994791,"uuid":"493117753","full_name":"fajoaq/e-commerce-solidjs","owner":"fajoaq","description":"Building an example E-Commerce front-page using SolidJs. This is mostly an excercise in the new framework and mixing css modules with sass.","archived":false,"fork":false,"pushed_at":"2022-06-07T00:46:51.000Z","size":2663,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T02:37:35.239Z","etag":null,"topics":["css-modules","cssmodules","e-commerce","javascript","sass","solidjs","web-design","web-development","webdesign","webdevelopment"],"latest_commit_sha":null,"homepage":"e-commerce-solidjs.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fajoaq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-17T06:09:37.000Z","updated_at":"2024-02-01T11:59:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"295bcc52-611b-4f9d-a1ed-f9141b0f18c3","html_url":"https://github.com/fajoaq/e-commerce-solidjs","commit_stats":{"total_commits":70,"total_committers":1,"mean_commits":70.0,"dds":0.0,"last_synced_commit":"f09a381f63736a3c295cae921b18a837b49ae658"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fajoaq%2Fe-commerce-solidjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fajoaq%2Fe-commerce-solidjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fajoaq%2Fe-commerce-solidjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fajoaq%2Fe-commerce-solidjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fajoaq","download_url":"https://codeload.github.com/fajoaq/e-commerce-solidjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248507040,"owners_count":21115525,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-modules","cssmodules","e-commerce","javascript","sass","solidjs","web-design","web-development","webdesign","webdevelopment"],"created_at":"2024-09-24T14:20:26.591Z","updated_at":"2025-04-12T02:37:35.880Z","avatar_url":"https://github.com/fajoaq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://e-commerce-solidjs.vercel.app/\"\u003e\u003cimg src=\"/public/site_image.jpg\" alt=\"E-Commerce by Francis Joaquin\" width=\"200\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\n    E-Commerce with Solidjs\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003eAn example E-Commerce site built by Francis Joaquin using SolidJs + Contenful api.\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#key-features\"\u003eKey Features\u003c/a\u003e •\n  \u003ca href=\"#credits\"\u003eCredits\u003c/a\u003e •\n  \u003ca href=\"#related\"\u003eRelated\u003c/a\u003e •\n  \u003ca href=\"#learning-solidjs\"\u003eLearning\u003c/a\u003e •\n  \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n\u003c/p\u003e\n\n## Key Features\n\n* Contentful - Graphql like data fetching\n  - Products and their details come from the Contenful data store.\n\n* Responsive - For all devices\n  - Fully responsive layout from 320px onward.\n\n* Data (cart) persistence between sessions\n\n* Lightning quick first paint - Above the fold first\n  - Only critical resources are loaded above the fold, and the rest when they're needed.\n\n* Vertical Rhythm - Flowing design\n  - Interactivity as you scroll.\n\n* Responsive menu - Animated and interactive\n  - Mobile friendly and interactive cart animations.\n\n* Loading animations\n\n## How To Use\n\nTo clone and run this application, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. A Contentful account with api keys is also required (create .env files). From your command line:\n\n```bash\n# Clone this repository\n$ git clone https://github.com/fajoaq/e-commerce-solidjs\n\n# Go into the repository\n$ cd e-commerce-solidjs\n\n# Install dependencies\n$ npm install\n\n# Run the app\n$ npm run dev\n```\n\n## Learning Solidjs\n\nThese are the steps I took to build my example E-Commerce site.\n\n- Cloned the SolidJs Vite template:\n\n  \u003e npx degit solidjs/templates/js my-app\n  \u003e cd my-app\n  \u003e npm i # or yarn or pnpm\n  \u003e npm run dev # or yarn or pnpm\n\n- Installed the Contenful package:\n\n  \u003e npm i contentful\n\n- Created a new Space/Organization on Contenful\n\n- Created a new Content Model (products)\n\n- Created a few example products\n\n- Generated a new API Key on Contentful\n\n- Created development env file (.env.development)\n\n  \u003e only variables prefixed with VITE will be exposed to the client\n\n- Created client with createClient from contentful\n\n  ```\n  const client = createClient({...})\n  ```\n\n- Created a new resource from solidjs to fetch data\n\n  ```\n  const [productData] = createResource(async () =\u003e {})\n  ```\n\n- Test data with For primitive from solidjs\n\n  ```\n  \u003cFor each={productData()}\u003e{(item) =\u003e \u003cli\u003e{item.fields.title}\u003c/li\u003e}\u003c/For\u003e\n  ```\n\n- Added App layout\n\n- Added Sass for global variables within media queries\n\n  ```\n  @media (max-width: vars.$breakpoint-sm)\n  ```\n\n- Added public folder for static file serve. Static assets can be handled in two different ways:\n\n  \u003e Imported in JavaScript or referenced in templates/CSS via relative paths. Such references will be handled by webpack.\n\n  \u003e Placed in the public directory and referenced via absolute paths. These assets will simply be copied and not go through webpack.\n\n- Added a store for product and customer data. It's as simple as importing the \"homepageProducts, setHomepageProducts\" etc where needed.\n\n```\n  import { createStore } from \"solid-js/store\";\n\n  const [homepageProducts, setHomepageProducts] = createStore({\n  featuredProducts: [],\n  bestSellers: [],\n  });\n```\n\n## Credits\n\nThis software uses the following open source packages:\n\n- [SolidJs](https://www.solidjs.com/)\n- [Node.js](https://nodejs.org/)\n- [lodash](https://lodash.com/)\n- [sass](https://sass-lang.com/)\n- [vite](https://vitejs.dev/)\n- [vite-plugin-solid](https://github.com/solidjs/vite-plugin-solid)\n\n## Related\n\n[joaquinc](https://joaquinc.com) - My portfolio\n\n## License\n\nMIT\n\n---\n\n\u003e [joaquinc.com](https://www.joaquinc.com) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e GitHub [@fajoaq](https://github.com/fajoaq) \u0026nbsp;\u0026middot;\u0026nbsp;\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffajoaq%2Fe-commerce-solidjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffajoaq%2Fe-commerce-solidjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffajoaq%2Fe-commerce-solidjs/lists"}